Question

我使用FileReader API读取图像，然后将图像作为blob存储在Indexeddb中，以便稍后与服务器同步。在那之前，我想显示图像的缩略图。添加图像似乎不是最理想的。以完整分辨率的canvas元素，然后调整大小。似乎更好的解决方案是在添加它之前调整它的大小。

同步后，我想删除全分辨率图像，只显示缩略图。（我主要关注的是网络应用程序，移动设备上的存储限制）

有可能吗？怎么样？

Answer 1

不要担心向DOM添加额外的东西，只是不要做任何会渲染它的东西。

假设你从 -

的某些方面开始

var reader = new FileReader();
reader.onload = function (e) 
    {
    var img    = new Image ;
    img.src    = e.target.result;
    img.onload = function ()

然后在这个onload函数中你可以......

var canvas = document.createElement（＆＃34; canvas＆＃34;）; var context = canvas.getContext（＆＃34; 2d＆＃34;）;

//以您想要的任何分辨率绘制

context.drawImage（this，0,0，width，height）;

//从画布上读回来，如果你想要压缩

var saveData = canvas.toDataURL（＆＃34; image / jpeg＆＃34;，0.7）;

//并将其保存在您想要的位置 //删除canvas元素，除非你想继续这样做

是否可以在浏览器中调整图像大小而不将其添加到DOM

1 个答案: