Question

预期的行为：

用户上传图片。
用户可以使用向左，向右，向上，向下，放大，缩小按钮修改从此图像创建的缩略图。
用户验证缩略图。

问题：

在预览缩略图后，将初始图像重新绘制左，右，上或下的一些像素的结果会导致绘制空白图像。

代码：

function loadImage(){   
var files = document.getElementById("file_input").files;
var file = files[0];

var reader = new FileReader();
var image = new Image();

var canvas = document.createElement('canvas');
var thumbnail_canvas = document.createElement('canvas');


if (file){
    reader.readAsDataURL(file);
}

reader.onloadend = function(_file){
    image.src = reader.result;

    canvas.width = image.width;
    canvas.height = image.height;   
    thumbnail_canvas.width = 275;
    thumbnail_canvas.height = 275;

    var t_p_x = 0, t_p_y=0, t_d_x=275;
    canvas.getContext('2d').drawImage(image, 0, 0, image.width, image.height);
    thumbnail_canvas.getContext('2d').drawImage(image, t_p_x, t_p_y, t_d_x, t_d_x, 0, 0, 275, 275);

    document.getElementById('loadedImage').style.background = 'url('+canvas.toDataUrl()+')';
    document.getElementById('loadedImage').style.backgroundRepeat = "no-repeat";
    document.getElementById('loadedImage').style.backgroundSize = image.width+"px "+image.height+"px";

    document.getElementById('preview').style.background = 'url('+thumbnail_canvas.toDataURL()+')';
    document.getElementById('preview').style.backgroundRepeat = "no-repeat";
    document.getElementById('preview').style.backgroundSize = "275px 275px";
 }
}


  function left(){
    var t_p_x=10,t_p_y=0,t_d_x=275; 
    var image = new Image();
    image.src = document.getElementById('loadedImage').style.background.slice(4,-1);
    thumbnail_canvas.getContext('2d').drawImage(image, t_p_x, t_p_y, t_d_x, t_d_x, 0, 0, 275, 275);

    document.getElementById('preview').style.background = 'url('+thumbnail_canvas.toDataURL()+')';
    document.getElementById('preview').style.backgroundRepeat = "no-repeat";
    document.getElementById('preview').style.backgroundSize = "275px 275px";

}

分享此行为的任何线索或经验？

为什么从文件上传图像结果重绘缩略图图像是空白图像？

0 个答案: