图片相关文章列表

2021年12月13日2022年9月09日

js,JQ 图片转换base64 base64转换为file对象,blob对象

<pre class="inline:true class:language-javascript decode:1 " >//将图片转换为Base64 
//url 图片连接或者是blob对象
//callback 回调函数
function getImgToBase64(url,callback){
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  var img = new Image;//经过构造函数来建立的 img 实例，在赋予 src 值后就会马上下载图片，相比 createElement() 建立 <img /> 省去了 append()，也就避免了文档冗余和污染
  img.crossOrigin = 'Anonymous';
  //要先确保图片完整获取到，这是个异步事件
  img.onload = function(){
    canvas.height = img.height;//确保canvas的尺寸和图片同样
    canvas.width = img.width; ctx.drawImage(img,0,0);//将图片绘制到canvas中
    var dataURL = canvas.toDataURL('image/png');//转换图片为dataURL,传第二个参数可压缩图片,前提是图片格式jpeg或者webp格式的
    callback(dataURL);//调用回调函数
    canvas = null; }; img.src = url; } //将base64转换为文件对象
function dataURLtoFile(dataurl, filename) { var arr = dataurl.split(','); var mime = arr[0].match(/:(.*?);/)[1]; var bstr = atob(arr[1]); var n = bstr.length; var u8arr = new Uint8Array(n); while(n--){ u8arr[n] = bstr.charCodeAt(n); } //转换成file对象
  return new File([u8arr], filename, {type:mime}); //转换成成blob对象
  //return new Blob([u8arr],{type:mime});
} //将图片转换为base64,再将base64转换成file对象<br />
getImgToBase64('images/ruoshui.png',function(data){<br /> 　　　var myFile = dataURLtoFile(data,'testimgtestimgtestimg');<br /> 　　　console.log(myFile); <br />});

<pre class="inline:true class:language-javascript decode:1 " >//将图片转换为Base64

//url 图片连接或者是blob对象

//callback 回调函数

function getImgToBase64(url,callback){

var canvas = document.createElement('canvas');

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

var img = new Image;//经过构造函数来建立的 img 实例，在赋予 src 值后就会马上下载图片，相比 createElement() 建立 <img /> 省去了 append()，也就避免了文档冗余和污染

img.crossOrigin = 'Anonymous';

//要先确保图片完整获取到，这是个异步事件

img.onload = function(){

canvas.height = img.height;//确保canvas的尺寸和图片同样

canvas.width = img.width; ctx.drawImage(img,0,0);//将图片绘制到canvas中

var dataURL = canvas.toDataURL('image/png');//转换图片为dataURL,传第二个参数可压缩图片,前提是图片格式jpeg或者webp格式的

callback(dataURL);//调用回调函数

canvas = null; }; img.src = url; } //将base64转换为文件对象

function dataURLtoFile(dataurl, filename) { var arr = dataurl.split(','); var mime = arr[0].match(/:(.*?);/)[1]; var bstr = atob(arr[1]); var n = bstr.length; var u8arr = new Uint8Array(n); while(n--){ u8arr[n] = bstr.charCodeAt(n); } //转换成file对象

return new File([u8arr], filename, {type:mime}); //转换成成blob对象

//return new Blob([u8arr],{type:mime});

} //将图片转换为base64,再将base64转换成file对象<br />

getImgToBase64('images/ruoshui.png',function(data){<br /> 　　　var myFile = dataURLtoFile(data,'testimgtestimgtestimg');<br /> 　　　console.log(myFile); <br />});

toDataURL函数说明(能够压缩图片)

lyingzhu 0

图片

js,JQ 图片转换base64 base64转换为file对象,blob对象

最好看的配色RGB值以及如何找到自己喜欢的颜色搭配

WordPress去掉或禁止文章页顶部显示特色图片