图片转换成html代码_java html转图片

全栈程序员-站长 • 2022年8月6日下午5:16 • 未分类 • 阅读 3

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元售后保障童叟无欺

1.页面上的图片，转换成base64格式，可以通过canvas 的 toDataURL

例子：给定图片的url 将图片转换为base64

var imageSrc = “../images/0.jpg”; // 图片的URL

//@param image:Image 对象，ext:图片的格式(jpg)
function getBase64Image(image,ext){
var canvas = document.createElement(“canvas”);
canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext(“2d”);
context.drawImage(image,0,0,image.width,image.height);

// 这里是不支持跨域的
var base64 = canvas.toDataURL(“image/”+ext);
return base64;

}

var image = new Image();
//image.crossOrigin=””; // 如果图片是跨域的，填上”*”或者”anonymous” 核心是请求头中包含了 Origin: “anonymous”或”*” 字段，响应头中就会附加上 Access-Control-Allow-Origin: * 字段,

image.src = imageSrc;

image.onload = function(){
var ext = imageSrc.substring(imageSrc.lastIndexOf(“.”)+1);
var base64 = getBase64Image(image,ext);
console.log(base64);
//alert(base64);
}

2.将已经显示在页面上的图片转换为base64

如果是跨域的图片，要加上 crossorigin 属性

setTimeout(function(){
console.log(getBase64Image(document.getElementsByTagName(“img”)[0],”jpg”));
},3000);

2.文件选择图片时，转换成base64

使用FileReader api readAsDataURL FileReader AIP 地址 https://developer.mozilla.org/en-US/docs/Web/API/FileReader

例子：

window.onload = function(){
var file = document.getElementById(“demo_input”);
file.onchange = function(){
var file = this.files[0];
alert(file.type);
if(!/image/.test(file.type));
return;
var reader = new FileReader();
reader.readAsDataURL(file)
reader.onload = function(){
alert(this.result);
}
}

}

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/166422.html原文链接：https://javaforall.net