js复制图片,支持jpg和png

2023-10-27

直接上关键代码

copy_jpg('url.jpg') //示例

// 复制图片,支持jpg,png,传入图片url即可
function copy_jpg(url) {
    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
        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('复制失败')
    }
}

我相信你们能看懂的
当然这是其中一种复制的方法,当然有其他更好的
需要注意当网页在本地或https协议才能复制成功

dome

https://dome.yyzhu.vip/js-copy-img
dome图片

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

js复制图片,支持jpg和png 的相关文章

随机推荐

  • Visual Studio 2019 + OpenGL环境配置

    使用的是 gl h glu h glaux h 下载目录 https download csdn net download boyinc0de 11171372 在 接下来 包含目录对应下载下来的文件 解压开来的include文件夹 库目录
  • C ++ STL中的set :: find()函数

    C STL set find 函数 C STL set find function set find function is a predefined function it is used to check whether an elem
  • mysql 日期比较 between的用法的意思_Mysql 中现在仍旧不知道的小知识点

    重点 表结构的增删改 alter table t students add id int alter table t students drop id alter table t students modify id varchar 20
  • python 逻辑回归 summary_python – 为什么statsmodels和R之间的逻辑回归结果不同?

    我试图比较 python的statsmodels和R中的逻辑回归实现 import statsmodels api as sm import pandas as pd import pylab as pl import numpy as n
  • Vue.js 学习笔记十三:Vue Router 之 keep-alive

    目录 keep alive keep alive 有时候我们不希望组件被重新渲染影响使用体验 或者处于性能考虑 避免多次重复渲染降低性能 而是希望组件可以缓存下来 维持当前的状态 这时候就可以用到 keep alive 组件 keep al
  • Java开发设计模式-工厂模式-Factory

    1 工厂模式简介 工厂模式 Factory Pattern 是 Java 中最常用的设计模式之一 这种类型的设计模式属于创建型模式 它提供了一种创建对象的最佳方式 在工厂模式中 我们在创建对象时不会对客户端暴露创建逻辑 并且是通过使用一个共
  • thinkphp5学习路程 一 thinphp5的简单上手

    首先我们将php的环境配置好 能正常运行 这方面就不细说了 本人是windows系统 主要是给自己当笔记用 多写写总是好的 只看不练学不会 thinkphp5完全开发手册 http www kancloud cn manual thinkp
  • 第二专题 第三道题

    1 题目编号 1001 2 简单题意 知道一个公式8 x 4 7 x 3 2 x 2 3 x 6 y 给定T组数据 每组数据中给出y值 让求x 且y大于等于x等于0小于等于x等于100 3 解题思路形成过程 看到这道题就会想到数太大 容易超
  • Element 级联组件实现省市区街道联动

    最近在做一个省市区街道联动的功能 使用的是 Element 级联组件 现将自己的思路和问题记录一下 有对直辖市 港澳台数据的处理 大佬们有更好的建议可以留言哦 话不多说 直接上菜 先看下效果 接口数据 小伙伴们可以根据后端返回数据做相应处理
  • Java基础笔记:Collection集合框架

    Collection框架 Collection 单列集合类的根接口 用于存储一系列符合某种规则的元素 它有两个重要的子接口 分别是java util List和java util Set List的特点是元素有序 元素可重复 Set的特点是
  • C语言联合体

    一 联合体的概念 联合 union 是一个能在同一个存储空间里 但不同时 存储不同类型数据的复合数据类型 大致结构如下 n union foo 定义一个联合类型foo n q int digit q double bigfl 10 q ch
  • 浅学Linux内核MMU

    1 MMU基本知识 1 1 什么是MMU MMU是 MemoryManagementUnit 的缩写即 内存管理单元 针对各种CPU MMU是个可选的配件 MMU负责的是虚拟地址与物理地址的转换 提供硬件机制的内存访问授权 现代 CPU 的
  • Google TPU的发展历程与思考(二)

    TPU v2 与 TPU v3 相较于 TPU v1 只能用于推理 TPU v2 致力于解决训练难题 TPUv2 设计目标 训练与推理 仅仅是转变方向而已吗 TPUv2 誓要解决更难的训练任务 事实上 训练与推理的难度相差比想象的要大 1
  • Acwing 1414.牛异或

    输入样例 5 1 0 5 4 2 输出样例 6 4 5 刚开始看到这个题 我是毫无思绪 看了一下题解 https www acwing com video 2339 老师说这个是最大异或对的变形 于是我去找了一下最大异或对 看完之后我只能想
  • 关于Mysql-unknow-column-in-where-clause

    写在前边 已经很久不更新了啊 整个2月份几乎没有遇到什么新鲜事 直到昨天我又犯了一次傻 貌似只有我犯傻的时候才有材料可以跟大家分享 问题表现 mysql 报错 unknow column sys in where clause 事实上这是个
  • GD32F303X SPI调试遇到的问题总结

    1 下面是一些常规配置 SPI0为例 define SPI0 CS ENABLE GPIO BC GPIOA GPIO PIN 4 LOW define SPI0 CS DISABLE GPIO BOP GPIOA GPIO PIN 4 H
  • c语言long和long long的取值范围

    溢出和取值范围 C语言的整型溢出问题 整数溢出 int long int long long int 占用字节 C和指针 中写过 long与int 标准只规定long不小于int的长度 int不小于short的长度 double与int类型
  • UGUI屏幕自适应

    关键点 0 自适应的测试 通过设置多种的屏幕大小进行测试 测试时最好要打开Maximize on Play 在屏幕放大的情况下容易观察自适应情况 1 所谓的自适应 就是 a 保持相对位置不变 例如UI设计在屏幕的左上角 那么在各种的分辨率下
  • java多线程和高并发系列一 & JMM、Synchronized、volatile

    目录 什么是JMM模型 概念 JVM的工作 JMM的工作 总结 JMM不同于JVM内存区域模型 主内存 工作内存 数据同步八大原子操作 同步规则分析 并发编程的可见性 原子性于有序性问题 原子性 可见性 有序性 volatile内存语义 v
  • js复制图片,支持jpg和png

    直接上关键代码 copy jpg url jpg 示例 复制图片 支持jpg png 传入图片url即可 function copy jpg url var canvas document createElement canvas 创建一个