JS 图片转base64编码实现及相关问题

冷不防 2022-06-16 04:42 99阅读 0赞

1、JS图片转base64编码实现

function convertImgToBase64(url, callback, outputFormat){
        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(outputFormat || 'image/png');
            callback.call(this, dataURL);
            canvas = null; 
        };
    	img.onerror = function(){
            canvas.height = img.height;
            canvas.width = img.width;
            ctx.drawImage(img,0,0);
            var dataURL = canvas.toDataURL(outputFormat || 'image/png');
            callback.call(this, dataURL);
            canvas = null; 
        };
        img.src = url;
    	if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数     
    		canvas.height = img.height;
            canvas.width = img.width;
            ctx.drawImage(img,0,0);
            var dataURL = canvas.toDataURL(outputFormat || 'image/png');
            callback.call(this, dataURL);
            canvas = null; 
          return; // 直接返回，不用再处理onload事件     
    	}    
    }

2、代码分析

1）上述中的onload会在图片加载成功后调用

2）上述的onerror会在图片地址为无效地址的时候，即图片加载失败后调用

3）img.complete用于如果浏览器缓存了图片，则这个值true，onload、onerror都不会被调用了，此时直接进行处理即可

发表评论取消回复

表情：

评论列表（有 0 条评论，99人围观）

还没有评论，来说两句吧...

相关阅读

相关 Base64编码转图片

Base64编码转图片 - 一个工具箱 - 好用的在线工具都在这里！

本是古典何须时尚/ 2024年05月02日 20:20/ 0 赞/ 70 阅读

相关 Base64编码转图片在线

[Base64在线转换图片\_图片转Base64\_在线base64图片转换工具\_yzc工具网][Base64_Base64_base64_yzc] [Base64_Ba

朱雀/ 2024年02月20日 11:54/ 0 赞/ 111 阅读

相关 Base64转图片和图片转Base64

<template> <view> <view class="imgtext"> <im

爱被打了一巴掌/ 2023年01月13日 09:37/ 0 赞/ 331 阅读

相关 base64编码转图片格式

base64编码转图片格式 <!DOCTYPE html> <html lang="en"> <head> <meta chars

╰半夏微凉°/ 2023年01月01日 04:58/ 0 赞/ 272 阅读

相关 js 图片转base64

function getImgSrc(id) { return $('' + id).attr("src");

不念不忘少年蓝@/ 2022年12月27日 11:10/ 0 赞/ 224 阅读

相关 Base64编码与图片文件互转

直接上代码： import java.io.FileInputStream; import java.io.FileOutputStream; i

清疚/ 2022年07月17日 02:08/ 0 赞/ 242 阅读

相关 base64转图片图片转base64

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

本是古典何须时尚/ 2022年06月17日 05:09/ 0 赞/ 380 阅读

相关 JS 图片转base64编码实现及相关问题

1、JS图片转base64编码实现 function convertImgToBase64(url, callback, outputFormat){

冷不防/ 2022年06月16日 04:42/ 0 赞/ 100 阅读

相关 js传送图片Base64编码

> 起初打算将base64的编码放到input的value中，后台用String接收，结果后台一直取不到，看来是我想多了。虽然input的value是没有长度限制的，Strin

妖狐艹你老母/ 2022年05月20日 02:12/ 0 赞/ 234 阅读

相关图片url转base64编码

Html <input type='file' class='upload-img' /> JQ $('.upload-img').on('change'

古城微笑少年丶/ 2022年03月17日 05:46/ 0 赞/ 438 阅读