Question

我正在寻找一种方法来自动将javascript完成的画布渲染的输出图像调整为图像。也就是说，随着浏览器大小的改变，输出图像随之改变。我尝试将页面设为iframe并使用父级来调整大小，但无济于事。我尝试使用css和js也无济于事。调整大小最终完成到源图像而不是最终产品，因此只有源图像最终被看到而不是预期。这是代码。（注意：我使用base64作为图像，因为文件路径在Chrome中不起作用。）

<script>
        function scramble(el){
          "use strict";
    var V=document.createElement('canvas');
    var W=V.width=el.width,H=V.height=el.height,C=V.getContext('2d');
    C.drawImage(el,0,0);
    var id=C.getImageData(0,0,W,H),D=id.data,L=D.length,i=L/4,A=[];
    for(;--i;)A[i]=i;
    function S(A){
        var L=A.length,x=L>>3,y,t,i=0,s=[];
        if(L<8)return A;
        for(;i<L;i+=x)s[i/x]=S(A.slice(i,i+x));
        for(i=4;--i;)y=[6,4,7,5,1,3,0,2][i],t=s[i],s[i]=s[y],s[y]=t;
        s=[].concat.apply([],s);
        return s;
    }
    var N=C.createImageData(W,H),d=N.data,A=S(A);
    for(var i=0;i<L;i++)d[i]=D[(A[i>>2]*4)+(i%4)];
    C.putImageData(N,0,0);
    el.src=C.canvas.toDataURL();
}

function btnScrambleClick() {

  var srcImage = document.getElementById('srcImage');
  srcImage.onload = null;
  scramble(srcImage);
  
}

function previewFile() {
  var srcImage = document.getElementById('srcImage');
  var file = document.querySelector('srcImage').onload[0];
  var reader = new FileReader();

  reader.onloadend = function() {
    srcImage.src = reader.result;
  }

  if (file) {
    reader.readAsDataURL(file);
  } else {
    
  }
};

previewFile();
</script>

<img id="srcImage" src="image.png" alt="" onload="btnScrambleClick()">

自动调整输出画布图像的大小

0 个答案: