img对象,file对象,base64,canvas对象相互转换以及图片压缩

àì夳堔傛蜴生んèń 2022-12-08 05:14 174阅读 0赞

#  #

[ img对象，file对象，base64，canvas对象相互转换以及图片压缩 ][img_file_base64_canvas_]

</h1>
            <div class="clear"></div>
            <div class="postBody">

先上一张图：

![1475680-20190312204416645-1976367767.png][]

以上图片是js几乎所有图片类型的转换方式了。接下来讲讲几种常用的类型转换：

1、 urltoImage(url,fn) 会通过一个url加载所需要的图片对象，其中 url 参数传入图片的 url , fn 为回调方法,包含一个Image对象的参数，代码如下：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>function</code> 
      <code>urltoImage (url,fn){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>img = </code> 
      <code>new</code> 
      <code>Image();</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>img.src = url;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>img.onload = </code> 
      <code>function</code> 
      <code>(){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>fn(img);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>};</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

2、 imagetoCanvas(image) 会将一个 Image 对象转变为一个 Canvas 类型对象，其中 image 参数传入一个Image对象，代码如下：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>function</code> 
      <code>imagetoCanvas(image){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>cvs = document.createElement(</code> 
      <code>"canvas"</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>ctx = cvs.getContext(</code> 
      <code>'2d'</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>cvs.width = image.width;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>cvs.height = image.height;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>ctx.drawImage(image, 0, 0, cvs.width, cvs.height);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>return</code> 
      <code>cvs ;</code> 
     </div> 
     <div> 
      <code>};</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

3、 canvasResizetoFile(canvas,quality,fn) 会将一个 Canvas 对象压缩转变为一个 Blob 类型对象；其中 canvas 参数传入一个 Canvas 对象; quality 参数传入一个0-1的 number 类型，表示图片压缩质量; fn 为回调方法，包含一个 Blob 对象的参数;代码如下：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>function</code> 
      <code>canvasResizetoFile(canvas,quality,fn){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>canvas.toBlob(</code> 
      <code>function</code> 
      <code>(blob) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>fn(blob);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>},</code> 
      <code>'image/jpeg'</code> 
      <code>,quality);</code> 
     </div> 
     <div> 
      <code>};</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

这里的 Blob 对象表示不可变的类似文件对象的原始数据。 Blob 表示不一定是 JavaScript 原生形式的数据。 File 接口基于 Blob ，继承了 Blob 的功能并将其扩展使其支持用户系统上的文件。我们可以把它当做File类型对待，其他更具体的用法可以参考MDN文档。

4、 canvasResizetoDataURL(canvas,quality) 会将一个 Canvas 对象压缩转变为一个 dataURL 字符串,其中 canvas 参数传入一个 Canvas 对象; quality 参数传入一个0-1的 number 类型，表示图片压缩质量;代码如下：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>methods.canvasResizetoDataURL = </code> 
      <code>function</code> 
      <code>(canvas,quality){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>return</code> 
      <code>canvas.toDataURL(</code> 
      <code>'image/jpeg'</code> 
      <code>,quality);</code> 
     </div> 
     <div> 
      <code>};</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

5、 filetoDataURL(file,fn) 会将 File （ Blob ）类型文件转变为 dataURL 字符串,其中 file 参数传入一个 File （ Blob ）类型文件; fn 为回调方法，包含一个 dataURL 字符串的参数;代码如下：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>function</code> 
      <code>filetoDataURL(file,fn){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>reader = </code> 
      <code>new</code> 
      <code>FileReader();</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>reader.onloadend = </code> 
      <code>function</code> 
      <code>(e){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>fn(e.target.result);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>};</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>reader.readAsDataURL(file);</code> 
     </div> 
     <div> 
      <code>};</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

6、 dataURLtoImage(dataurl,fn) 会将一串 dataURL 字符串转变为 Image 类型文件,其中 dataurl 参数传入一个 dataURL 字符串, fn 为回调方法，包含一个 Image 类型文件的参数，代码如下：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>function</code> 
      <code>dataURLtoImage(dataurl,fn){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>img = </code> 
      <code>new</code> 
      <code>Image();</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>img.onload = </code> 
      <code>function</code> 
      <code>() { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>fn(img);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>};</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>img.src = dataurl;</code> 
     </div> 
     <div> 
      <code>};</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

7、 dataURLtoFile(dataurl) 会将一串 dataURL 字符串转变为 Blob 类型对象，其中 dataurl 参数传入一个 dataURL 字符串,代码如下：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>function</code> 
      <code>dataURLtoFile(dataurl) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>arr = dataurl.split(</code> 
      <code>','</code> 
      <code>), mime = arr[0].match(/:(.*?);/)[1],</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>bstr = atob(arr[1]), n = bstr.length, u8arr = </code> 
      <code>new</code> 
      <code>Uint8Array(n);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>while</code> 
      <code>(n--){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>u8arr[n] = bstr.charCodeAt(n);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>return</code> 
      <code>new</code> 
      <code>Blob([u8arr], {type:mime});</code> 
     </div> 
     <div> 
      <code>};</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

以上7种转换基本可以覆盖所有类型转换了，下面看下JS等比压缩图片的办法：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> 
    <div>
      18 
    </div> 
    <div>
      19 
    </div> 
    <div>
      20 
    </div> 
    <div>
      21 
    </div> 
    <div>
      22 
    </div> 
    <div>
      23 
    </div> 
    <div>
      24 
    </div> 
    <div>
      25 
    </div> 
    <div>
      26 
    </div> 
    <div>
      27 
    </div> 
    <div>
      28 
    </div> 
    <div>
      29 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>function</code> 
      <code>proDownImage(path,imgObj) { </code> 
      <code>// 等比压缩图片工具</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>//var proMaxHeight = 185;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>proMaxHeight=300;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>proMaxWidth = 175;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>size = </code> 
      <code>new</code> 
      <code>Object();　</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>image = </code> 
      <code>new</code> 
      <code>Image();　</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>image.src = path;　</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>image.attachEvent(</code> 
      <code>"onreadystatechange"</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>function</code> 
      <code>() { </code> 
      <code>// 当加载状态改变时执行此方法,因为img的加载有延迟</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>if</code> 
      <code>(image.readyState == </code> 
      <code>"complete"</code> 
      <code>) { </code> 
      <code>// 当加载状态为完全结束时进入</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>if</code> 
      <code>(image.width &gt; 0 &amp;&amp; image.height &gt; 0) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>ww = proMaxWidth / image.width;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>hh = proMaxHeight / image.height;　</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>rate = (ww &lt; hh) ? ww: hh;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>if</code> 
      <code>(rate &lt;= 1) {　</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>alert(</code> 
      <code>"imgage width*rate is:"</code> 
      <code>+ image.width * rate);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>size.width = image.width * rate;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>size.height = image.height * rate;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>} </code> 
      <code>else</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>alert(</code> 
      <code>"imgage width is:"</code> 
      <code>+ image.width);　　</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>size.width = image.width;　　</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>size.height = image.height;　　　</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}　</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>imgObj.attr(</code> 
      <code>"width"</code> 
      <code>,size.width);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>imgObj.attr(</code> 
      <code>"height"</code> 
      <code>,size.height);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>});</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

参考：

https://blog.csdn.net/twtcqw2008/article/details/80766914

[img_file_base64_canvas_]: https://www.cnblogs.com/lwxiao/p/10519617.html
[1475680-20190312204416645-1976367767.png]: /images/20221123/a7aa5408f62f4558ad37201371d5b4a4.png