^(*￣(oo)￣)^：可以复制到微信和钉钉，文件夹中不可以复制

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>复制</title>

</head>

<style>

</style>

<body>

<img id="img" width="200" height="200" src="https://img2.baidu.com/it/u=668613382,2066490799&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1659114000&t=05de12239d16f24652090b5d1df4bbfe" alt="">

<div class="copy" onclick="copyHandle()">点我复制图片</div>

<script>

  // 复制图片，支持jpg，png

  function copyHandle() {

    let oImg =document.getElementById('img')

    let url = oImg.src;

    var canvas = document.createElement('canvas') // 创建一个画板

    let 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到画板

      let url = canvas.toDataURL("image/png") // 转换图片为dataURL，格式为png

      this.clipboardImg(url) // 调用复制方法

    }

  }

  // 从url下载并复制图片，如果是png格式的图片直接调用此方法就能复制成功

  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

        })

      ]);

      alert('复制成功')

    } catch (err) {

      alert('复制失败')

    }

  }

</script>

</body>

</html>

js复制图片的更多相关文章

  1. JS实现图片预加载无需等待

    网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...

  2. CefBrowser 复制图片解决办法

    使用的是CefSharp控件,开放出的功能比较多,但是还是有一些封闭的.例如复制图片到Clipbord,库没有提供. VC虽然看得懂,但托管代码没搞过,看得很蛋痛,而且如果有CefSharp有新版本还 ...

  3. 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览

    html代码: <div id="divPreview"> <img id="imgHeadPhoto" src="Images/H ...

  4. js实现图片向上播放（轮番滚动）

    js实现图片向上播放(轮番滚动) 实现方式,多种多样,这里我们来看javascript实现方式,重点是研究里面的源代码: 看看别人是如何写出“优雅的代码” <!DOCTYPE html PUBL ...

  5. Gulp实现css、js、图片的压缩以及css、js文件的MD5命名

    目前做代码压缩合并的工具有很多,诸如gulp,webpack,grunt等等,可以说这些项目构建工具的功能非常之强大:图片压缩.图片转base64.css和js的压缩以及合并,文件的md5重命名 -- ...

  6. js实现图片粘贴上传到服务器并展示

    最近看了一些有关于js实现图片粘贴上传的demo,实现如下: (这里只能检测到截图粘贴和图片右键复制之后粘贴) demo1: document.addEventListener('paste', fu ...

  7. js简单 图片版时钟，带翻转效果

    js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  8. java IO流复制图片

    一.使用字节流复制图片 //字节流方法 public static void copyFile()throws IOException { //1.获取目标路径 //(1)可以通过字符串 // Str ...

  9. js压缩图片base64长度

    var myCanvas=$('.img-container > img').cropper('getCroppedCanvas'); (function (base64){ var image ...

  10. js复制

    JS实现各种复制到剪贴板 一.实现点击按钮,复制文本框中的的内容                         <script type="text/javascript" ...

随机推荐

  1. 性能浪费的日志案例-使用Lambda优化日志案例

    性能浪费的日志案例 注:日志可以帮助我们快速的定位问题,记录程序运行过程中的情况,以便项目的监控和优化.一种典型的场景就是对参数进行有条件使用,例如对日志消息进行拼接后,在满足条件的情况下进行打印输出 ...

  2. Objects非空判断-声明异常throws

    Objects非空判断 还记得我们学习过一个类Objects吗,曾经提到过它由一些静态的实用方法组成,这些方法是null-save(空指针安全的)或null-tolerant (容忍空指针的),那么在 ...

  3. 快速入门pandas进行数据挖掘数据分析[多维度排序、数据筛选、分组计算、透视表](一)

    1. 快速入门python,python基本语法 Python使用缩进(tab或者空格)来组织代码,而不是像其 他语言比如R.C++.Java和Perl那样用大括号.考虑使用for循 环来实现排序算法 ...

  4. 2023年 .NET Monorepo 来了

    Monorepo(monolithic repository)是一种项目架构,简单来说就是,将多个项目或包文件放到一个git仓库来管理,很多前端项目vue3.element都是采用的这种架构模式. 之 ...

  5. 最容易懂的策略模式消除if-else分支，实现开闭原则，提高可扩展性

    1 介绍 策略模式最常用的场景就是用于消除代码中的if-else,这里所说的if-else并不是说任何简单的判断都引入策略模式来优化,这样反而会增加代码的复杂度. 反例:使用策略模式对一个boolea ...

  6. 理论+实践，教你如何使用Nginx实现限流

    摘要:Nginx作为一款高性能的Web代理和负载均衡服务器,往往会部署在一些互联网应用比较前置的位置.此时,我们就可以在Nginx上进行设置,对访问的IP地址和并发数进行相应的限制. 本文分享自华为云 ...

  7. SQL Case条件判断SQL

    问题描述:在表中取到一些值做出判断,配合监控监测一些表中的数据.使用select case when if 来做条件查询判断 CASE 表达式遍历条件并在满足第一个条件时返回一个值(类似于 if-th ...

  8. JAVA虚拟机02---JAVA虚拟机运行时数据区域简介

      JAVA虚拟机运行时数据区域 1.程序计数器 1)它可以看做是当前线程执行的字节代码的行指示器,通过改变计数器的值来决定下一步执行的代码 2)它是线程私有的,每个线程都有自己的程序计数器(JAVA ...

  9. springBoot集成flowable

    前言 Flowable可以十分灵活地加入你的应用/服务/构架.可以将JAR形式发布的Flowable库加入应用或服务,来嵌入引擎. 以JAR形式发布使Flowable可以轻易加入任何Java环境:Ja ...

  10. Windows服务安装小工具

    主要为了方便Windows服务的安装卸载,不需要使用CMD命令. 先给大家小工具的效果图: 使用此工具需要注意一下几点: 1.服务程序的.NET Framework版本: 2.服务名称与服务执行程序名 ...