<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>js base64编码格式图片另存为下载-风来了.fox</title>
</head>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js" ></script>
<body>
<a id="tttt"></a>
<h2>图片</h2>
<p><img id="ringoImage" alt="" ></p>
<div><a onclick="down()" href="javascript:void(0);">下载图片</div>
<script>
/**
* 根据图片生成画布
*/
function convertImageToCanvas(image) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);
return canvas;
}
/**
* 下载图片
*/
function down() {
// 此处可以调用接口动态获取 base64
$("#ringoImage").attr("src","data:image/jpg;base64,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
评论1