// 压缩图片

export default {

  methods:{

    // 只有blob或者file形式的数据的情况直接调用此方法

    // file:文件，w：目标宽度，objDiv：压缩后要放置的目标容器

    photoCompress(file, w, objDiv){

      var ready = new FileReader()  // 异步文件读取机制

      ready.readAsDataURL(file) // 图片预览

      ready.onload = function(){

        var re = this.result

        this.canvasDataURL(re, w, objDiv)

      }

    },

    // 只有图片url的情况直接调用此方法，re为url地址

    canvasDataURL(re, w, objDiv){

      var newImg = new Image()

      newImg.src = re

      var imgWidth,

        imgHeight,

        offsetX = 0,

        offsetY = 0

        // img的onload事件中同步执行绘制图像的函数，就可以一边装载一边绘制了

      newImg.onload = function(){

        var img = document.createElement("img")

        img.src = newImg.src

        imgWidth = img.width

        imgHeight = img.height

        var newHeight = Math.round(imgHeight * w / imgWidth) // 按比例计算压缩后的图片高度

        var canvas = document.createElement("canvas")

        canvas.width = w

        canvas.height = newHeight

        var ctx = canvas.getContext('2d')

        // clearRect(x,y,width,height)

        // 参数说明：x、y矩形起点的横纵坐标，width、height表示矩形宽高

        ctx.clearRect(0,0,w,newHeight)

        // 重置图片宽高为压缩后的宽高

        imgWidth = w

        imgHeight = newHeight

        // drawImage(image,x,y,w,h)

        // 参数说明：image-Image对象，x、y是绘制时该图像在画布中的起始坐标。w、h表示绘制时图像的宽高

        // 该方法也可以复制图片某个区域：drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)

        // 参数说明：image-Image对象，sx、sy是复制源图像中被复制区域的起点横纵坐标，sw、sh时候被复制区域的宽高

        // dx、dy是表示复制后的目标图像在画布中的起始横纵坐标，dw，dh是复制后的目标图像的宽高

        ctx.drawImage(img,offsetX,offsetY,imgWidth,imgHeight)

        // var base64 = canvas.toDataURL('img/png',0.7) // 参数表示：指定的图片类型，图片质量

        // if(typeof objDiv === 'object'){

            objDiv.appendChild(canvas)

            // console.log(base64)

        // } else if(typeof objDiv === 'function'){

        //     objDiv(base64)

        // }

      }

    }

  }

}