Question

我是JavaScript新手。最近几天，我为Chrome进行了扩展，它会截取所有标签的屏幕截图并将此数据推送到剪贴板。每张图片都很重，所以我决定压缩它们。但它不起作用。谁能知道问题是什么？

function copyToClipBoard(dataImage){
    document.body.appendChild(input);
    input.style.position = 'fixed';
    input.style.opacity = 0;

    var newImage = new Image();
    newImage.src = dataImage;
    console.log (newImage); 

    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext("2d").drawImage(newImage, 0, 0);
    input.value = canvas.toDataURL('image/jpeg', 0.1);
    console.log(input.value);
    input.select();
    document.execCommand('Copy');
    document.body.removeChild(input);
}

Answer 1

谢谢，Kaiido。现在每个想法都有效。问题是图片在绘图之前没有时间加载。

function copyToClipBoard(dataImage){
    document.body.appendChild(input);
    input.style.position = 'fixed';
    input.style.opacity = 0;

    var newImage = new Image();
    newImage.src = dataImage;
    console.log (newImage); 

    newImage.onload = function(){
       var canvas = document.createElement('canvas');
       canvas.width = 800;
       canvas.height = 500;
       var ctx = canvas.getContext("2d").drawImage(newImage, 0, 0, newImage.width, newImage.height, 0, 0, canvas.width, canvas.height);
       input.value = canvas.toDataURL('image/jpeg', 0.9);
       console.log(input.value);
       input.select();
       document.execCommand('Copy');
       document.body.removeChild(input);
    }
}

如何使用JavaScript以编程方式压缩图像并将其推送到剪贴板？

1 个答案: