首頁猿問 FabricJS：使用 Image...

FabricJS：使用 Image 子類時(shí)無法執(zhí)行“drawImage”

JavaScript

慕桂英3389331 2023-09-28 17:45:50

對于一個(gè)項(xiàng)目，我需要將各種類型的圖像添加到畫布，保存為 JSON 并再次加載。不同的類型沒有任何特定的屬性，我只需要類型不同即可。我創(chuàng)建了一個(gè)基于 Fabric.Image 的新類，如下所示：fabric.Icon = fabric.util.createClass(fabric.Image, { type: "icon", initialize: function (element, options) { this.callSuper("initialize", element, options); }, _render: function (ctx) { this.callSuper("_render", ctx); }, }); fabric.Icon.fromObject = function (object, callback) { return fabric.Object._fromObject("Icon", object, callback); };之后，我使用 SVG 圖像添加這種新類型的新對象：let newImage = new Image(); //HTML Image type, not FabricJSnewImage.onload = () => { let icon = new fabric.Icon(newImage); //my subclass of fabric.Image class this.canvas.add(icon);};newImage.src = "image.svg";當(dāng)我將畫布導(dǎo)出為 JSON 時(shí)let savedJSON = canvas.toJSON()并將其加載回來canvas.loadFromJSON(savedJSON, function () { canvas.requestRenderAll();}我收到以下錯(cuò)誤未捕獲的類型錯(cuò)誤：無法在“CanvasRenderingContext2D”上執(zhí)行“drawImage”：提供的值不是類型“（CSSImageValue或HTMLImageElement或SVGImageElement或HTMLVideoElement或HTMLCanvasElement或ImageBitmap或OffscreenCanvas）”當(dāng)我使用標(biāo)準(zhǔn) Fabric.Image 類時(shí)，一切正常。我應(yīng)該重寫子類中的其他方法嗎？或者我應(yīng)該以其他方式區(qū)分各種圖像類型？

查看完整描述

2 回答

茅侃侃

TA貢獻(xiàn)1842條經(jīng)驗(yàn) 獲得超21個(gè)贊

Fabric Image 類具有稍微復(fù)雜的恢復(fù)機(jī)制，因?yàn)樗枰跇?gòu)造函數(shù)中使用不可序列化的圖像元素。

這就是它在 FabricJS 中的實(shí)現(xiàn)方式：

/**

* Creates an instance of fabric.Image from its object representation

* @static

* @param {Object} object Object to create an instance from

* @param {Function} callback Callback to invoke when an image instance is created

*/

fabric.Image.fromObject = function(_object, callback) {

var object = fabric.util.object.clone(_object);

fabric.util.loadImage(object.src, function(img, isError) {

if (isError) {

callback && callback(null, true);

return;

}

fabric.Image.prototype._initFilters.call(object, object.filters, function(filters) {

object.filters = filters || [];

fabric.Image.prototype._initFilters.call(object, [object.resizeFilter], function(resizeFilters) {

object.resizeFilter = resizeFilters[0];

fabric.util.enlivenObjects([object.clipPath], function(enlivedProps) {

object.clipPath = enlivedProps[0];

var image = new fabric.Image(img, object);

callback(image, false);

});

}, null, object.crossOrigin);

};

恐怕你必須復(fù)制它并將 Fabric.Image 與 Fabric.Icon 交換

反對回復(fù) 2023-09-28

躍然一笑

TA貢獻(xiàn)1826條經(jīng)驗(yàn) 獲得超6個(gè)贊

好吧，這并不是這個(gè)問題的真正解決方案，但我找到了區(qū)分在保存和加載過程中持續(xù)存在的對象的正確方法 - 通過覆蓋其 toObject 方法來設(shè)置 Object.prototype 上的自定義屬性，如下所示：Fabric js extends toObject with?custom屬性，丟失默認(rèn)屬性?問題解決！

反對回復(fù) 2023-09-28