Question

我正在尝试使用剪贴板API将图像和json对象写入窗口剪贴板。（我正在使用vue和电子）我成功编写了图像和纯文本，但是当我尝试编写json对象时，它返回错误：

Uncaught (in promise) DOMException localhost/:1

我的代码是（this.object是一个JSON对象）

const textBlob = new Blob(['this.object.data','this.object.data2',...], {type: 'text/plain'});
const objBlob = new Blob([JSON.stringify(this.object)], {type: 'application/json'});

// defined a canvas with an image

canvas.toBlob(function(blob) {
  const item = new ClipboardItem({
    'image/png': blob,
    'text/plain': textBlob,
    'application/json': objBlob
  });
  navigator.permissions.query({name: 'clipboard-write'}).then((result) => {
    if (result.state === 'granted' || result.state === 'prompt') {
      navigator.clipboard.write([item]);
    }
  } 
}, 'image/png');

在这种情况下，它显示了错误，但是如果我删除项目中的'application/json': objBlob，它就可以工作。看起来剪贴板不接受json对象。真奇怪。

但是，我想将对象和图像一起写入剪贴板。有解决此问题的解决方案吗？也许我应该使用剪贴板API以外的其他东西？

提前谢谢！

Answer 1

Chrome是actively working on it，但暂时来说，他们仍然不支持编写const item = new ClipboardItem({ 'image/png': blob, 'text/plain': objBlob }); ...

因此，您仍然必须将其编写为<canvas id="canvas" width="200" height ="200"></canvas> var Ball=function(color) { this.color=color; this.x =100; this.y =100; this.xSpeed =5; this.ySpeed =3; };（对于大多数应用程序来说已经足够了）。

    Ball.prototype.move =function () {
        this.x += this.xSpeed;
        this.y += this.ySpeed;
    };

    Ball.prototype.checkCollison =function () {
        if(this.x < 0 ) {
            if(this.xSpeed >0){
                this.xSpeed--;
            }else if(this.xSpeed<0) {
                this.xSpeed++;
            }

            this.xSpeed = -this.xSpeed;
        }else if(this.x >200) {
            if(this.xSpeed >0){
                this.xSpeed--;
            }else if(this.xSpeed<0) {
                this.xSpeed++;

            this.xSpeed = -this.xSpeed;

        }else if(this.y < 0 ) {
            if(this.ySpeed>0) {
                this.ySpeed--;
            }else if(this.ySpeed<0) {
                this.ySpeed++;
            }
            this.ySpeed = -this.ySpeed;
        }
    }
    };

Answer 2

我添加了一个陷阱来查看实际错误： DOMException：不支持写入类型application / json。

如果使用纯文本/文本或utf，则应该能够将json重新读入对象。

仅当将对象粘贴到另一个应用程序中时，我才使用剪贴板，否则，我将使用本地或会话存储。

const objBlob = new Blob([JSON.stringify({'myobjLabel' : 'myObj'})], {type: 'text/plain'});

  const item = new ClipboardItem({
    'text/plain': objBlob
  });

  navigator.permissions.query({name: 'clipboard-write'}).then((result) => {
    if (result.state === 'granted' || result.state === 'prompt') {
      navigator.clipboard.write([item]).catch((ex) => { 
          console.log(ex) 
          } ); 
      }
    });

将图像和json对象写入剪贴板

2 个答案: