如何让HTML页面URL直接返回图片？适配仅支持HTTP/HTTPS的报表系统

方案1：用Blob URL让页面输出图片 #

你的原代码直接document.write(blob)会把Blob对象转成字符串，所以只显示[object Blob]。正确的做法是把Blob转成浏览器支持的临时URL，再替换页面内容为图片：

var canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
canvas.height = canvas.width = 100;
ctx.fillStyle = "purple";
ctx.fillRect(0, 0, 100, 100);

canvas.toBlob((blob) => {
    // 生成浏览器本地的临时图片URL（blob协议，兼容HTTP/HTTPS场景）
    const imageUrl = URL.createObjectURL(blob);
    
    // 清空页面并插入图片
    document.body.innerHTML = '';
    const img = document.createElement('img');
    img.src = imageUrl;
    img.style.width = '100%';
    img.style.height = 'auto';
    document.body.appendChild(img);
    
    // 也可以直接跳转到这个URL，浏览器会直接显示图片
    // window.location.href = imageUrl;
}, 'image/png');

这种blob:开头的URL是浏览器提供的临时HTTP兼容路径，大部分支持HTTP/HTTPS的报表系统都能识别。

方案2：重新尝试Data URI（排查格式问题） #

如果你之前硬编码Data URI无效，可能是格式错误，试试直接从canvas生成标准的Data URI：

var canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
canvas.height = canvas.width = 100;
ctx.fillStyle = "purple";
ctx.fillRect(0, 0, 100, 100);

// 直接生成base64格式的Data URI
const imageDataUrl = canvas.toDataURL('image/png');

// 替换页面为图片
document.body.innerHTML = `<img src="${imageDataUrl}" style="width:100%; height:auto;">`;

检查Data URI是否完整，有没有多余的空格或换行，部分系统对格式要求严格。

方案3：后端中转（仅支持公网HTTP/HTTPS链接时） #

如果报表系统只认公网的HTTP/HTTPS图片链接，需要后端接收前端生成的Blob，保存后返回公网URL：

var canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
canvas.height = canvas.width = 100;
ctx.fillStyle = "purple";
ctx.fillRect(0, 0, 100, 100);

canvas.toBlob((blob) => {
    const formData = new FormData();
    formData.append('image', blob, 'generated-image.png');
    
    // 发送到你的后端上传接口
    fetch('https://your-backend/upload', {
        method: 'POST',
        body: formData
    })
    .then(res => res.json())
    .then(data => {
        // 用后端返回的公网URL替换页面
        document.body.innerHTML = `<img src="${data.imageUrl}" style="width:100%; height:auto;">`;
    });
}, 'image/png');

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