weixin_39552768
weixin_39552768
2021-01-09 19:08

Group toDataUrl brings back nothing

Im not sure why this happens but when I use it in my app for the first time after clearing cache it brings back nothing.

Anything I can do?


  const dataURL = await this.groupRef.toDataURL({
          mimeType: "image/jpeg",
          x,
          y,
          width: scaledImgWidth,
          height: scaledImgHeight,
          quality: 1,
          pixelRatio: this.pixelRatio
        });

        if (!dataURL) {
          this.props.ErrorHandler.catchErrors({
            error: "ERROR: dataObjURL empty:",
            dataURL,
            group: this.groupRef
          });
        }

        const blobData = await this.dataURItoBlob(dataURL);
        const file = {
          filename: this.props.imageObject.name,
          filetype: "image/jpeg",
          filebody: blobData
        };
//FILE EMPTY HERE
        await this.handleUpload(file);

Compoent:


    <group rotation="{this.state.rotation}" x="{x_pos}" y="{y_pos}" draggable scalex="{this.state.scale}" scaley="{this.state.scale}" ref="{node"> {
                    this.groupRef = node;
                  }}
 ....

</group>

该提问来源于开源项目:konvajs/react-konva

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

6条回答

  • weixin_39706441 weixin_39706441 4月前

    What do you mean by "brings back nothing"? Do you have empty dataURL? What nodes do you have inside the group?

    点赞 评论 复制链接分享
  • weixin_39552768 weixin_39552768 4月前

    Actually I think it may be the dataURItoBlob

    I caught the empty file object after seeing this alert (would this cause that?):

    ReactKonva: You have a Konva node with draggable = true and position defined but no onDragMove or onDragEnd events are handled. Position of a node will be changed during drag&drop, so you should update state of the react app as well. Consider to add onDragMove or onDragEnd events. For more info see: https://github.com/konvajs/react-konva/issues/256

    logger | console extra | {"arguments":["ReactKonva: You have a Konva node with draggable = true and position defined but no onDragMove or onDragEnd events are handled.\nPosition of a node will be changed during drag&drop, so you should update state of the react app as well.\nConsider to add onDragMove or onDragEnd events.\nFor more info see: https://github.com/konvajs/react-konva/issues/256\n"]}

    点赞 评论 复制链接分享
  • weixin_39552768 weixin_39552768 4月前

    It's weird because it only happens when access the page after clearing cache and opening a new window. After refesh it works fine. Is there something that needs to load first?

    点赞 评论 复制链接分享
  • weixin_39706441 weixin_39706441 4月前

    That warning is not related here. Just check what do you have in dataURL. If it is a correct image (you can copy it and open in a new tab) then the error is somewhere else.

    点赞 评论 复制链接分享
  • weixin_39552768 weixin_39552768 4月前

    Is there anything that can be done to prevent the dataURL from group ref wont come back empty or tainted? Could it be how I'm processing the URL that makes the body come back empty? Here's how Im doing it:

    
      dataURItoBlob = dataURI => {
        var binary = atob(dataURI.split(",")[1]);
        var array = [];
        for (var i = 0; i < binary.length; i++) {
          array.push(binary.charCodeAt(i));
        }
        return new Blob([new Uint8Array(array)], { type: "image/jpeg" });
      };
    

    Wish I could find more details but this "empty" file body issue happens so randomly and rarely. But it's keeping users from uploading images so I may have to change the package worst case.

    点赞 评论 复制链接分享
  • weixin_39706441 weixin_39706441 4月前

    I think before debugging the file, you should debug the dataURI. Make it has what you need.

    You may have tainted issues of you have images inside the group from a different domain.

    点赞 评论 复制链接分享

相关推荐