前端手勢控制圖片外掛書寫四(圖片上傳及Ios圖片方向問題）

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碼。