新手提问，求大佬：web环境，怎样动态创建img标签，加载项目中的图片？

Creator 2.x
#1

  • Creator 版本：2.4.0

  • 目标平台： web
    我想实现动态生成图片的需求，但是生成前的图片，和生成后的图片有差别，所以使用camera直接截取屏幕不太好，我想用原生标签去加载，然后html2canvas生成图片，但是我不知道img.src的路径该怎么写。请大佬指教

#2

什么差别？讲出来，还可能给你提供解决问题的方法

#3

就是截图之前，图上面有俩按钮，我需要生成没有按钮的，不知道该怎么弄 :grin:，求大佬帮忙解答。

#4

什么用途呢

#5

这个为什么要用截图呢？你不是有了源文件吗？直接Sprite展示不行吗？

#7 
function downloadDomImage (url, options, onComplete) {
var { options, onComplete } = parseParameters(options, undefined, onComplete);

var img = new Image();

if (window.location.protocol !== 'file:') {
    img.crossOrigin = 'anonymous';
}

function loadCallback () {
    img.removeEventListener('load', loadCallback);
    img.removeEventListener('error', errorCallback);
    onComplete && onComplete(null, img);
}

function errorCallback () {
    img.removeEventListener('load', loadCallback);
    img.removeEventListener('error', errorCallback);
    onComplete && onComplete(new Error(cc.debug.getError(4930, url)));
}

img.addEventListener('load', loadCallback);
img.addEventListener('error', errorCallback);
img.src = url;
return img;

}
引擎源码，参考一下 download-dom-image.js

#8

想下载下来呢 :yum: Sprite有没有什么办法保存下来

#9

好的，感谢大佬，我去研究研究

#10

你通过Sprite能拿到SpriteFrame，再通过SpriteFrame能拿到Texture2D，根据Texture2D代入到下方代码的targetTexture2D试试

import { _decorator, Component, Node, Sprite } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('TTTT')
export class TTTT extends Component {

    @property({ displayName: "test", type: Sprite })
    private test: Sprite = null;

    public onLoad(): void {
        window["TTTT"] = this;
    }

    public download(): void {
        // 需要关闭该图片的自动图集合入
        let targetTexture2D = this.test.spriteFrame.texture;
        let canvas = document.createElement("canvas");
        let ctx = canvas.getContext("2d");

        canvas.width = targetTexture2D.width;
        canvas.height = targetTexture2D.height;

        ctx.drawImage(targetTexture2D.getHtmlElementObj(), 0, 0, targetTexture2D.width, targetTexture2D.height);

        let dataURL = canvas.toDataURL("image/png");// 拿到base64

        // base64转化可下载的文件
        let arr = dataURL.split(',');
        let bstr = atob(arr[1]);
        let n = bstr.length;
        let u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }

        // 下载
        let downloadEl = document.getElementById('file_download');
        if (!downloadEl) {
            downloadEl = document.createElement('a');
            downloadEl.id = 'file_download';
        }
        // 绑定文件信息
        downloadEl.href = window.URL.createObjectURL(new Blob([u8arr], { type: "image/png" }));
        downloadEl.download = "测试";
        downloadEl.click();
        window.URL.revokeObjectURL(downloadEl.href);
    }
}
creator3.3 怎样实现截取屏幕一部分保存为一张图片呢
#11

感谢大佬 :smiling_face_with_three_hearts:

#12

该主题在最后一个回复创建后14天后自动关闭。不再允许新的回复。