画布旋转功能创建空白图像

Posted 2023-03-13

【中文标题】画布旋转功能创建空白图像

【英文标题】：Canvas rotate function creates blank image

【发布时间】：2019-09-07 05:28:18

【问题描述】：

您好，我正在使用画布和 base64 字符串调整和压缩图像的大小

这是完整的代码

function preview_image(event)

    var fileReader = new FileReader();
    fileReader.onload = function (event)
    
        var image = new Image();
        image.onload=function()
        
            var canvas=document.createElement("canvas");
            var context=canvas.getContext("2d");
            canvas.width=600;
            canvas.height=canvas.width*image.height/image.width; /*For Aspect ratio*/

            context.rotate(90 * Math.PI/180); // rotate by 90 degrees

context.drawImage(image,0,0,image.width,image.height,0,0,canvas.width,canvas.height);

            var jpgurl=canvas.toDataURL('image/jpeg', 0.5);

        

    ;

我想将图像旋转 90 度，但使用 jpgurl 创建图像后，输出图像仍未旋转且为空白

【问题讨论】：

解决了吗？如果可能，请分享答案...

【参考方案1】：

旋转后的图像不在屏幕上。如果您想围绕其中心旋转图像，请尝试以下操作：

function preview_image(event)

    var fileReader = new FileReader();
    fileReader.onload = function (event)
    
        var image = new Image();
        image.onload=function()
        
            var canvas=document.createElement("canvas");
            var context=canvas.getContext("2d");
            canvas.width=600;
            canvas.height=canvas.width*image.height/image.width; /*For Aspect ratio*/

            // First move the origin (0,0) to the middle of the canvas
            context.translate(canvas.width/2, canvas.height/2)

            context.rotate(90 * Math.PI/180); // rotate by 90 degrees

            // And also draw the Image centered on the origin
            context.drawImage(image, -image.width/2, -image.height/2, image.width/2, image.height/2, 0, 0, canvas.width, canvas.height);


            var jpgurl=canvas.toDataURL('image/jpeg', 0.5);

        

    ;

有两个变化：

1) 在旋转画布之前平移原点

context.translate(canvas.width/2, canvas.height/2)

2) 绘制中心在原点之上的图像。

context.drawImage(image, -image.width/2, -image.height/2,
 image.width/2, image.height/2, 0, 0, canvas.width, canvas.height);

请记住，画布将保持旋转，其原点将位于其中心。如果您想返回，可以在translate 之前放置一个context.save()，在drawImage 之后放置一个context.restore()

【讨论】：

结果是相同的空白图像，没有旋转