将 Canvas 图像转换为 Blob，改变图像大小

Question

将 Canvas 图像转换为 Blob，改变图像大小

4

我有一个画布，可以缩放图像以适应其内部大小，我想做的是将图像导出为比画布设置更大的尺寸。我正在使用canvas.toBlob方法获取blob数据，并将其作为上传文件发送到我的服务器。

例如，画布大小为350px x 350px，我想将图像保存为800px x 1000px。

<canvas id="myCanvas" width="350" height="350"></canvas>

<script type="text/javasript">
    var canvas = document.getElementById('myCanvas');

    var context = canvas.getContext('2d');
    var imageObj = new Image();
        imageObj.onload = function() {
            var img_info = { width:527, height:350 };
            var sourceX = 0;
            var sourceY = 150;
            var sourceWidth = 4520;
            var sourceHeight = 3000;
            var destWidth = img_info.width;
            var destHeight = img_info.height;
            var destX = canvas.width / 2 - destWidth / 2;
            var destY = canvas.height / 2 - destHeight / 2;

            context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
        };

    imageObj.src = 'hhttp://i.imgur.com/tKplLLb.jpg';

    canvas.toBlob(
        function (blob) {
            var formData = new FormData();
            formData.append('file', blob);

            jQuery.ajax({
                url: "test.php",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function (res) {

                }
            });
       },
     'image/jpg'
    );
</script>

- Brian Putt

2

为什么不使用drawImage将图像缩放到第二个隐藏画布上，并在结果上使用toBlob？ - Gaurav

@Gaurav 不错的想法，我会尝试一下看看它是否保持相同的纵横比。 - Brian Putt

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- lostsource · Accepted Answer

这个函数接受一个画布和宽度+高度参数。它会返回一个新的画布元素，你可以在其上调用toBlob方法。

function getResizedCanvas(canvas,newWidth,newHeight) {
    var tmpCanvas = document.createElement('canvas');
    tmpCanvas.width = newWidth;
    tmpCanvas.height = newHeight;

    var ctx = tmpCanvas.getContext('2d');
    ctx.drawImage(canvas,0,0,canvas.width,canvas.height,0,0,newWidth,newHeight);

    return tmpCanvas;
}

这里有一个实际工作的例子： http://jsfiddle.net/L4dua/