canvas 尺寸问题 和 FileReader 读取图片

10802400 的图 要画在 pixelRatio=2.75 的屏上
css 样式宽度应该是等于 windowWidth 393
等价 截屏原样显示 不能使用图片直接 put回去
uni.createCanvasContext 和 uni.canvasPutImageData 也是各玩各的
用 CanvasContext.drawImage 吧 imageResource 要求是个字符串 不支持ImageData
ImageData 甚至还是 undefined
按道理只需要让 画布尺寸等于 10802400 就可以一比一画回去 但是尺寸只让通过css设置 不知道怎么想的

h5 的 putImageData(imageData, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)

uni.canvasPutImageData
data Uint8ClampedArray 是 图像像素点数据，一维数组，每四项表示一个像素点的rgba
x Number 是 源图像数据在目标画布中的位置偏移量（x 轴方向的偏移量）
y Number 是 源图像数据在目标画布中的位置偏移量（y 轴方向的偏移量）
width Number 是 源图像数据矩形区域的宽度
height Number 源图像数据矩形区域的高度

读取图片吧 chooseImage 返回的非压缩图图片读取不了就算了吧
new plus.io.FileReader() 得读取readAsDataURL 成base64 再解码
let dataUrl= e.target.result;
let base64= dataUrl.split(",")[1];
const buffer=uni.base64ToArrayBuffer(base64);
整个一脱裤子放屁

最后勉强画出来了

 <div  class="result-warp" :style="result.warpStyle" >  
      <canvas  class="result-canvas"   :canvas-id="result.canvasId" :hidpi="false"   :style="result.style"  ></canvas>  
</div>

  const {windowWidth} = this.sysInfo  
  const {rgba,width,height} = image; //不管怎么得到的数据  
  const style={  
                  width: `${width}px`,  
                  height: `${height}px`,  
                  transform:`scale(${1/pixelRatio})`, //反向缩放  
                  transformOrigin:"top left", //变形原点  
       };  

  const warpStyle= {  
                   overflow: ’hidden‘, //隐藏变形后多出的部分  
           width: `${windowWidth}px`,  
           height: `${Math.floor(height/pixelRatio)}px`  
  }  

 this.result={style,canvasId,width,heightwarpStyle}   
//$nextTick  
uni.canvasPutImageData({  
                         canvasId  
                         ,data:rgba  
                         ,x:0  
                         ,y:0  
                         ,width  
                         ,height  
      },this)

按上述操作可以画出来 但是这东西有个后遗症 后续交互式需要考虑transform带来的影响