CanvasTools - 基于Canvas的截圖輔助工具集

BigTomato 發(fā)布于2019-08-20 17:04 / 2274人閱讀

摘要：包含矩形，橢圓，畫筆，文字，馬賽克等多種工具以及撤銷，保存等各種功能地址項(xiàng)目地址仿知乎截圖反饋項(xiàng)目構(gòu)思來源于知乎建議反饋功能中的截圖反饋。期初看到該功能，驚為天人，不得不佩服知乎對(duì)用戶體驗(yàn)的細(xì)節(jié)追求。

CanvasTools

基于Canvas的截圖輔助工具集。包含矩形，橢圓，畫筆，文字，馬賽克等多種工具以及撤銷，保存等各種功能

Github地址 項(xiàng)目地址 DEMO 仿知乎截圖反饋

項(xiàng)目構(gòu)思來源于知乎建議反饋功能中的截圖反饋。期初看到該功能，驚為天人，不得不佩服知乎對(duì)用戶體驗(yàn)的細(xì)節(jié)追求。然后又對(duì)比和參考了QQ截圖（基本樣式來源于此），花了三天時(shí)間完成了CanvasTools項(xiàng)目的構(gòu)建。
截止目前，在完成了大部分功能的同時(shí)，也學(xué)習(xí)了大部分的Canvas API：

可用功能

矩形工具

橢圓工具

畫筆工具

文字工具

馬賽克工具

撤銷功能

保存功能(IE10+)

待完成功能

橡皮擦工具

如何使用 1.使用NPM

npm install

npm run build

2.直接使用

1.頁(yè)面head標(biāo)簽中引入

2.在body中創(chuàng)建canvas以及用來放置工具條的容器

...


...

3.在之前調(diào)用

GPU云服務(wù)器云服務(wù)器輔助工具 php程序員輔助工具 win10截圖工具 CanvasTools

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/83369.html

相關(guān)文章

基于casperjs、resemble.js實(shí)現(xiàn)一個(gè)像素對(duì)比服務(wù)

摘要：寫在最前本次分享一個(gè)提供設(shè)計(jì)稿與前端頁(yè)面進(jìn)行像素對(duì)比的服務(wù)，旨在為測(cè)試或者前端人員自己完成一個(gè)輔助性測(cè)試。圖片像素對(duì)比工具?；緦?shí)現(xiàn)思路可以理解為通過將圖片轉(zhuǎn)為后，獲取其圖像像素點(diǎn)，之后對(duì)每個(gè)像素點(diǎn)進(jìn)行一次比對(duì)。寫在最前本次分享一個(gè)提供設(shè)計(jì)稿與前端頁(yè)面進(jìn)行像素對(duì)比的node服務(wù)，旨在為測(cè)試或者前端人員自己完成一個(gè)輔助性測(cè)試。相信我，在像素級(jí)別的對(duì)比下，網(wǎng)頁(yè)對(duì)設(shè)計(jì)稿的還原程度一下子就...

Jingbin_ 2019-08-21 18:44 評(píng)論0 收藏0
網(wǎng)頁(yè)保存為圖片及高清截圖的優(yōu)化 | canvas跨域圖片配置

摘要：本次技術(shù)調(diào)研來源于項(xiàng)目中的一個(gè)重要功能需求實(shí)現(xiàn)微信長(zhǎng)按網(wǎng)頁(yè)保存為截圖。以下主要解決兩類跨域的圖片資源包括已配置過的中的圖片資源和微信用戶頭像圖片資源。本次技術(shù)調(diào)研來源于H5項(xiàng)目中的一個(gè)重要功能需求：實(shí)現(xiàn)微信長(zhǎng)按網(wǎng)頁(yè)保存為截圖。這里有個(gè)栗子（請(qǐng)用微信打開，長(zhǎng)按圖片即可保存）：3分鐘探索你的知識(shí)邊界將整個(gè)網(wǎng)頁(yè)保存為圖片是一個(gè)十分有趣的功能，常見于H5活動(dòng)頁(yè)的結(jié)尾頁(yè)分享。以下則是項(xiàng)目中...

zhaochunqi 2019-08-01 17:43 評(píng)論0 收藏0
網(wǎng)頁(yè)保存為圖片及高清截圖的優(yōu)化 | canvas跨域圖片配置

摘要：本次技術(shù)調(diào)研來源于項(xiàng)目中的一個(gè)重要功能需求實(shí)現(xiàn)微信長(zhǎng)按網(wǎng)頁(yè)保存為截圖。以下主要解決兩類跨域的圖片資源包括已配置過的中的圖片資源和微信用戶頭像圖片資源。本次技術(shù)調(diào)研來源于H5項(xiàng)目中的一個(gè)重要功能需求：實(shí)現(xiàn)微信長(zhǎng)按網(wǎng)頁(yè)保存為截圖。這里有個(gè)栗子（請(qǐng)用微信打開，長(zhǎng)按圖片即可保存）：3分鐘探索你的知識(shí)邊界將整個(gè)網(wǎng)頁(yè)保存為圖片是一個(gè)十分有趣的功能，常見于H5活動(dòng)頁(yè)的結(jié)尾頁(yè)分享。以下則是項(xiàng)目中...

GHOST_349178 2019-08-21 16:51 評(píng)論0 收藏0
網(wǎng)頁(yè)保存為圖片及高清截圖的優(yōu)化 | canvas跨域圖片配置

摘要：本次技術(shù)調(diào)研來源于項(xiàng)目中的一個(gè)重要功能需求實(shí)現(xiàn)微信長(zhǎng)按網(wǎng)頁(yè)保存為截圖。以下主要解決兩類跨域的圖片資源包括已配置過的中的圖片資源和微信用戶頭像圖片資源。本次技術(shù)調(diào)研來源于H5項(xiàng)目中的一個(gè)重要功能需求：實(shí)現(xiàn)微信長(zhǎng)按網(wǎng)頁(yè)保存為截圖。這里有個(gè)栗子（請(qǐng)用微信打開，長(zhǎng)按圖片即可保存）：3分鐘探索你的知識(shí)邊界將整個(gè)網(wǎng)頁(yè)保存為圖片是一個(gè)十分有趣的功能，常見于H5活動(dòng)頁(yè)的結(jié)尾頁(yè)分享。以下則是項(xiàng)目中...

Galence 2019-08-30 15:53 評(píng)論0 收藏0
Windows操作系統(tǒng)——WindowsVulnScan提權(quán)輔助工具簡(jiǎn)介與使用教程

摘要：主要用途為查找是否有公開的網(wǎng)站為。但缺點(diǎn)是該網(wǎng)站限制網(wǎng)絡(luò)發(fā)包的速度，采用了單線程的方式，掃描耗時(shí)較長(zhǎng)。希望本篇文章能對(duì)你有所幫助，有錯(cuò)誤的地方，歡迎指出喜歡的話，不要忘記點(diǎn)贊哦 ...

CarterLi 2021-11-17 09:33 評(píng)論0 收藏0