亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

FabricJS:使用 Image 子類時無法執行“drawImage”

FabricJS:使用 Image 子類時無法執行“drawImage”

慕桂英3389331 2023-09-28 17:45:50
對于一個項目,我需要將各種類型的圖像添加到畫布,保存為 JSON 并再次加載。不同的類型沒有任何特定的屬性,我只需要類型不同即可。我創建了一個基于 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";當我將畫布導出為 JSON 時let savedJSON = canvas.toJSON()并將其加載回來canvas.loadFromJSON(savedJSON, function () {    canvas.requestRenderAll();}我收到以下錯誤未捕獲的類型錯誤:無法在“CanvasRenderingContext2D”上執行“drawImage”:提供的值不是類型“(CSSImageValue或HTMLImageElement或SVGImageElement或HTMLVideoElement或HTMLCanvasElement或ImageBitmap或OffscreenCanvas)”當我使用標準 Fabric.Image 類時,一切正常。我應該重寫子類中的其他方法嗎?或者我應該以其他方式區分各種圖像類型?
查看完整描述

2 回答

?
茅侃侃

TA貢獻1842條經驗 獲得超21個贊

Fabric Image 類具有稍微復雜的恢復機制,因為它需要在構造函數中使用不可序列化的圖像元素。


這就是它在 FabricJS 中的實現方式:


  /**

   * 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);

  };

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


查看完整回答
反對 回復 2023-09-28
?
躍然一笑

TA貢獻1826條經驗 獲得超6個贊

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



查看完整回答
反對 回復 2023-09-28
  • 2 回答
  • 0 關注
  • 287 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號