前端手势控制图片插件书写四(图片上传及Ios图片方向问题）

Posted 2022-05-08 qdcnbj

1、在图片上传中，使用的input的type为File的属性。使用filereader的Api

let that = this;
var file = document.getElementById("file").files[0];
console.log(document.getElementById("file").files);
if(!/image\/\w+/.test(file.type))
console.error("看清楚，这个需要图片！");
return false;

var reader = new FileReader();
//将文件以Data URL形式读入页面
reader.readAsDataURL(file);
reader.onload=function(e)
console.log(e.target.result.length)

 

 

2、在ios竖着拍的图片中在canvas画布上初始绘制时会出现顺时针旋转90度的问题。

这是因为ios系统在竖着拍照的时候图片信息中的图片方向Orientation为6导致的问题，这里可以使用exif插件可以获取到图片的Orientation，如果为6我们需要做特殊处理。

let orientation = that.getPhotoOrientation(document.querySelector(‘.div_bg_img‘));

　if (orientation == 6 && flag == true)

  　　 ctx.rotate(90 * Math.PI / 180);

　　　 ctx.translate(0, -width * this.imageQuality);

      ctx.drawImage(pure_img, 0, 0, height * this.imageQuality, width * this.imageQuality);

　

 

 

3、图片质量问题。

在canvas中，图片质量由画布的大小来控制，我们在应用中只有保持画布的大小和css样式的大小成比例即可。否则会变形。如果想要图片质量高，画布可以设置大一些。

var bgcanvas = document.getElementById(‘canvas‘);

var ctx = bgcanvas.getContext(‘2d‘);

let canvas_outer = document.getElementById(‘canvas_outer‘);

let canvasOuter = canvas_outer.getBoundingClientRect();

bgcanvas.height = canvasOuter.height * this.imageQuality;

bgcanvas.width = canvasOuter.width * this.imageQuality;

 

 

4、然后使用toDataUrl()方法即可生成base64码。