HTML之图像数据base64、object file之间的相互转换-阿里云开发者社区

HTML之图像数据base64、object file之间的相互转换

2022-11-26 300

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： HTML之图像数据base64、object file之间的相互转换

1、图片转换base64

function getImgToBase64(url,callback){//将图片转换为Base64
    var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d'),
    img = new Image;
    img.crossOrigin = 'Anonymous';
    img.onload = function(){
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img,0,0);
        var dataURL = canvas.toDataURL('image/png');
        callback(dataURL);
        canvas = null;
    };
    img.src = url;
}

2、base64转换成file object

function dataURLtoFile(dataurl, filename) {//将base64转换为文件
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {type:mime});
}
//可以将图片转换为base64
getImgToBase64('img/test.png',function(data){
  　var myFile = dataURLtoFile(data,'testimgtestimgtestimg');
  　console.log(myFile);
});

3、base64绘制到canvas上面

<canvas id="myCanvas" width="800" height="800"></canvas>
<script> 
var
    img = new Image();
    img.src=imgbase64;
    let myCanvas =$("#myCanvas").get(0);
    myCanvas.getContext('2d').drawImage(img,0,0);
    myCanvas.getContext('2d').fillText("32中文132",50,50);
</script>

裁剪图片：

<script>
    var t = this;
    $(function(){
        $("#crop_img").click(function(){
            t.editPic = document.getElementById('edit_pic'); //
            let cord = document.getElementById("x_y").value;
            let x11=cord.split(",")[0];
            let y11=cord.split(",")[1];
            let x22=cord.split(",")[2];
            let y22=cord.split(",")[3];
            t.editPic.height = y22-y11;
            t.editPic.width = x22-x11;
            var ctx = t.editPic.getContext('2d');
            var images = new Image();
            images.src = document.getElementById('show_img').src;
            images.onload = function(){
                ctx.drawImage(images, x11, y11, x22-x11, y22-y11, 0, 0, x22-x11, y22-y11,);
                document.getElementById('show_crop').src = t.editPic.toDataURL("image/jpeg");
            };
        });
    });
</script>
<body>
    <img id="show_img" src=""><br />
    <canvas id="edit_pic"></canvas>
    <input type="text" name="coor" placeholder="坐标" readonly="true" id="x_y" style="width: 600px"><br>
    <img id="show_crop" src=""><br />
</body>