直播源码网站，js处理图片变形、方向、压缩等

直播源码网站，js处理图片变形、方向、压缩等实现的相关代码

//检查图片是否有被压扁，如果有，返回比率<br>//http://stackoverflow.com/questions/11929099/html5-canvas-drawimage-ratio-bug-ios<br>function detectVerticalSquash(img) {<br>  // 拍照在IOS7或以下的机型会出现照片被压扁的bug<br>  var data;<br>  var ih = img.naturalHeight;<br>  var canvas = document.createElement('canvas');<br>  canvas.width = 1;<br>  canvas.height = ih;<br>  var ctx = canvas.getContext('2d');<br>  ctx.drawImage(img, 0, 0);<br>  try {<br>    data = ctx.getImageData(0, 0, 1, ih).data;<br>  } catch (err) {<br>    console.log('Cannot check verticalSquash: CORS?');<br>    return 1;<br>  }<br>  var sy = 0;<br>  var ey = ih;<br>  var py = ih;<br>  while (py > sy) {<br>    var alpha = data[(py - 1) * 4 + 3];<br>    if (alpha === 0) {<br>      ey = py;<br>    } else {<br>      sy = py;<br>    }<br>    py = (ey + sy) >> 1; // py = parseInt((ey + sy) / 2)<br>  }<br>  var ratio = py / ih;<br>  return ratio === 0 ? 1 : ratio;<br>}<br>//https://gist.github.com/fupslot/5015897<br>function dataURItoBuffer(dataURI) {<br>  var byteString = atob(dataURI.split(',')[1]);<br>  var buffer = new ArrayBuffer(byteString.length);<br>  var view = new Uint8Array(buffer);<br>  for (var i = 0; i < byteString.length; i++) {<br>    view[i] = byteString.charCodeAt(i);<br>  }<br>  return buffer;<br>}<br>function dataURItoBlob(dataURI) {<br>  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];<br>  var buffer = dataURItoBuffer(dataURI);<br>  return new Blob([buffer], { type: mimeString });<br>}<br>//获取图片的orientation<br>//http://stackoverflow.com/questions/7584794/accessing-jpeg-exif-rotation-data-in-javascript-on-the-client-side<br>function getOrientation(buffer) {<br>  var view = new DataView(buffer);<br>  if (view.getUint16(0, false) != 0xffd8) return -2;<br>  var length = view.byteLength,<br>    offset = 2;<br>  while (offset < length) {<br>    var marker = view.getUint16(offset, false);<br>    offset += 2;<br>    if (marker == 0xffe1) {<br>      if (view.getUint32((offset += 2), false) != 0x45786966) return -1;<br>      var little = view.getUint16((offset += 6), false) == 0x4949;<br>      offset += view.getUint32(offset + 4, little);<br>      var tags = view.getUint16(offset, little);<br>      offset += 2;<br>      for (var i = 0; i < tags; i++)<br>        if (view.getUint16(offset + i * 12, little) == 0x0112)<br>          return view.getUint16(offset + i * 12 + 8, little);<br>    } else if ((marker & 0xff00) != 0xff00) break;<br>    else offset += view.getUint16(offset, false);<br>  }<br>  return -1;<br>}<br> //修正拍照时图片的方向<br> //http://stackoverflow.com/questions/19463126/how-to-draw-photo-with-correct-orientation-in-canvas-after-capture-photo-by-usin<br>function orientationHelper(canvas, ctx, orientation) {<br>  const w = canvas.width,<br>    h = canvas.height;<br>  if (orientation > 4) {<br>    canvas.width = h;<br>    canvas.height = w;<br>  }<br>  switch (orientation) {<br>    case 2:<br>      ctx.translate(w, 0);<br>      ctx.scale(-1, 1);<br>      break;<br>    case 3:<br>      ctx.translate(w, h);<br>      ctx.rotate(Math.PI);<br>      break;<br>    case 4:<br>      ctx.translate(0, h);<br>      ctx.scale(1, -1);<br>      break;<br>    case 5:<br>      ctx.rotate(0.5 * Math.PI);<br>      ctx.scale(1, -1);<br>      break;<br>    case 6:<br>      ctx.rotate(0.5 * Math.PI);<br>      ctx.translate(0, -h);<br>      break;<br>    case 7:<br>      ctx.rotate(0.5 * Math.PI);<br>      ctx.translate(w, -h);<br>      ctx.scale(-1, 1);<br>      break;<br>    case 8:<br>      ctx.rotate(-0.5 * Math.PI);<br>      ctx.translate(-w, 0);<br>      break;<br>  }<br>}<br>// canvas 压缩图片<br>export function compress(file, options, callback) {<br>  const reader = new FileReader();<br>  reader.onload = function (evt) {<br>    if (options.compress === false) {<br>      // 不启用压缩 & base64上传 的分支，不做任何处理，直接返回文件的base64编码<br>      file.base64 = evt.target.result;<br>      callback(file);<br>      return;<br>    }<br>    // 启用压缩的分支<br>    const img = new Image();<br>    img.onload = function () {<br>      const ratio = detectVerticalSquash(img);<br>      const orientation = getOrientation(dataURItoBuffer(img.src));<br>      const canvas = document.createElement('canvas');<br>      const ctx = canvas.getContext('2d');<br>      const maxW = options.compress.width;<br>      const maxH = options.compress.height;<br>      let w = img.width;<br>      let h = img.height;<br>      let dataURL;<br>      if (w < h && h > maxH) {<br>        w = parseInt((maxH * img.width) / img.height);<br>        h = maxH;<br>      } else if (w >= h && w > maxW) {<br>        h = parseInt((maxW * img.height) / img.width);<br>        w = maxW;<br>      }<br>      canvas.width = w;<br>      canvas.height = h;<br>      if (orientation > 0) {<br>        orientationHelper(canvas, ctx, orientation);<br>      }<br>      ctx.drawImage(img, 0, 0, w, h / ratio);<br>      if (/image\/jpeg/.test(file.type) || /image\/jpg/.test(file.type)) {<br>        dataURL = canvas.toDataURL('image/jpeg', options.compress.quality);<br>      } else {<br>        dataURL = canvas.toDataURL(file.type);<br>      }<br>      if (options.type == 'file') {<br>        if (/;base64,null/.test(dataURL) || /;base64,$/.test(dataURL)) {<br>          // 压缩出错，以文件方式上传的，采用原文件上传<br>          console.warn(<br>            'Compress fail, dataURL is ' +<br>              dataURL +<br>              '. Next will use origin file to upload.'<br>          );<br>          callback(file);<br>        } else {<br>          let blob = dataURItoBlob(dataURL);<br>          blob.id = file.id;<br>          blob.name = file.name;<br>          blob.lastModified = file.lastModified;<br>          blob.lastModifiedDate = file.lastModifiedDate;<br>          callback(blob);<br>        }<br>      } else {<br>        if (/;base64,null/.test(dataURL) || /;base64,$/.test(dataURL)) {<br>          // 压缩失败，以base64上传的，直接报错不上传<br>          options.onError(<br>            file,<br>            new Error('Compress fail, dataURL is ' + dataURL + '.')<br>          );<br>          callback();<br>        } else {<br>          file.base64 = dataURL;<br>          callback(file);<br>        }<br>      }<br>    };<br>    img.src = evt.target.result;<br>  };<br>  reader.readAsDataURL(file);<br>}<br>// 补全图片base64头部<br>export function completePictureBase64(suffix,file) {<br>  if(suffix === 'png') {<br>    return 'data:image/png;base64,' + file<br>  }else {<br>    return 'data:image/jpeg;base64,' + file<br>  }<br>}

以上就是直播源码网站，js处理图片变形、方向、压缩等实现的相关代码，更多内容欢迎关注之后的文章