如何在Canvas中修改图片（旋转）后添加下载链接？

我来帮你搞定这个需求！下面是修改后的完整代码，不仅修复了原旋转逻辑的小问题，还添加了下载按钮，点击就能获取旋转后的图片：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Flipping photo in a canvas tag</title>
<style>
#canvas {cursor: pointer;}
canvas { height: 50vh; }
#downloadBtn { margin-top: 10px; padding: 8px 16px; cursor: pointer; }
</style>
</head>
<body>
<label>Image File:</label><br/>
<input type="file" id="imageLoader" name="imageLoader"/>
<h1>Example of using <code>&lt;canvas&gt;</code></h1>
<p>This example shows how a photo is loaded in a <code>&lt;canvas&gt;</code> tag, flipped, and downloaded.</p>
<p>Click on the photo to flip (provided, of course, that your browser supports <code>&lt;canvas&gt;</code>)</p>
<canvas id="canvas" style="border:1px red solid;"></canvas>
<button id="downloadBtn" style="display: none;">下载修改后的图片</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
var img = new Image();
var isFlipped = false; // 标记图片是否已旋转

function handleImage(e){
    var reader = new FileReader();
    reader.onload = function(event){
        img.onload = function(){
            can.width = img.width;
            can.height = img.height;
            ctx.drawImage(img, 0, 0, img.width, img.height);
            document.getElementById('downloadBtn').style.display = 'inline-block'; // 图片加载后显示下载按钮
        }
        img.src = event.target.result;
        isFlipped = false; // 加载新图片重置旋转状态
    }
    reader.readAsDataURL(e.target.files[0]);
}

can.onclick = function() {
    ctx.clearRect(0, 0, can.width, can.height); // 清空画布
    ctx.save(); // 保存当前上下文状态
    
    if (!isFlipped) {
        // 旋转180度：先平移到画布中心，旋转，再平移回来
        ctx.translate(can.width / 2, can.height / 2);
        ctx.rotate(Math.PI);
        ctx.translate(-can.width / 2, -can.height / 2);
    }
    ctx.drawImage(img, 0, 0, can.width, can.height);
    ctx.restore(); // 恢复上下文状态
    isFlipped = !isFlipped; // 切换旋转状态
};

// 下载功能实现
document.getElementById('downloadBtn').addEventListener('click', function() {
    // 将Canvas内容转换为PNG图片的DataURL
    var imageURL = can.toDataURL('image/png');
    // 创建临时a标签
    var link = document.createElement('a');
    link.href = imageURL;
    // 设置下载文件名
    link.download = 'modified_image.png';
    // 模拟点击触发下载
    document.body.appendChild(link);
    link.click();
    // 移除临时标签
    document.body.removeChild(link);
});
</script>
</body>
</html>

关键修改说明： #

• 修复旋转逻辑：原代码的旋转会导致坐标偏移，现在改为基于画布中心旋转，确保图片始终在画布内显示，同时用isFlipped标记状态，实现点击切换旋转/还原
• 添加下载按钮：图片加载完成后显示下载按钮，点击时通过canvas.toDataURL()将画布内容转为图片链接，创建临时a标签触发下载
• 状态管理：加载新图片时重置旋转状态，保证每次新图片的初始状态是未旋转的

这样你就能实现点击图片旋转，再点击下载按钮获取修改后的图片啦！

内容的提问来源于stack exchange，提问作者unknown