首页 > 其他分享 >js 复制图片

js 复制图片

时间:2022-12-29 17:45:21浏览次数:35  
标签:canvas const url image js 复制 blob 图片

    //点击复制二维码
    function copyPic(url){
       var canvas = document.createElement('canvas') // 创建一个画板
       const image = new Image()
       image.setAttribute('crossOrigin', 'Anonymous') // 可能会有跨越问题
       image.src = url
       image.onload = () => { // img加载完成事件
         canvas.width = image.width // 设置画板宽度
         canvas.height = image.height // 设置画板高度
         canvas.getContext('2d').drawImage(image, 0, 0) // 加载img到画板
         const url = canvas.toDataURL('image/png') // 转换图片为dataURL,格式为png
         clipboardImg(url) // 调用复制方法
       }
    }
    async function clipboardImg(url) {
        try {
          const data = await fetch(url)
          const blob = await data.blob()
          await navigator.clipboard.write([
            new window.ClipboardItem({
              [blob.type]: blob
            })
          ])
          console.log('复制成功')
        } catch (err) {
          console.log('复制失败')
        }
     }

  

标签:canvas,const,url,image,js,复制,blob,图片
From: https://www.cnblogs.com/guxingzhe/p/17013115.html

相关文章

  • Js插件 之jqzoom放大镜
    链接:https://pan.baidu.com/s/1yI8KL7QjrT9zqOLlk_SsTA提取码:sjm8一、效果图 二、示例<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"http://w......
  • vue项目调用exe文件(JS方式)
    方式一:项目中引入下面JS(function(f){if(typeofexports==="object"&&typeofmodule!=="undefined"){module.exports=f();}elseif(t......
  • js里的类 class
    以前不知道为啥,总觉得这个类很高深莫测,然后自己在开发业务中也没有需要使用它的地方。所以就一直没去了解,今天有时间看了一下文档,在这稍微记录一下自己的总结。类的关键字......
  • js倒计时功能
    <!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><metaht......
  • main.js和 router文件夹里面的index.js引入的vue一定要一样
     当 main.js和router文件夹里面的index.js引入的vue不一样      错误:找不到<router-view>标签解决办法:将main.js和index.js的vue引入成为一样的......
  • 记:后端对字符串进行gzip压缩,前端js进行gzip解压
    最近有个需求要求对长字符串进行gzip压缩,然后在js进行解压缩的操作:publicstaticvoidmain(String[]args){try{StringlongString="www.baidu.com";......
  • JSX/TSX的好处
    1.之前没怎么用过JSX/TSX,基本上还是用html/css/js分离的方式,但是最近的一个@click="func(3)"的实现,发现了JSX的好处之一;如上,在html的某个元素里用了@click="func(3)"属......
  • 解决使用JSON.stringify时遇到的循环引用问题
    利用 js MessageChannel函数进行封装一个函数新建一个MessageChannel的实例,获取两个管道,我们从管道1发送数据,从管道2进行接收,我们这样就拿到新的数据,这样就能......
  • js. hw4
    functionensure(condition,message){//在条件不成立的时候,输出messageif(!condition){console.log('***测试失败:',message)}else{con......
  • nestjs 使用异常过滤器
    创建过滤器需要实现ExceptionFilter然后实现他的catch方法最后通过response.status(status).json返回(response通过host.switchToHttp().getResponse()获取)在局部使用则......