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

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

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

CanvasTools

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

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

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

可用功能

矩形工具

橢圓工具

畫筆工具

文字工具

馬賽克工具

撤銷功能

保存功能(IE10+)

待完成功能

橡皮擦工具

如何使用 1.使用NPM

npm install

npm run build

2.直接使用

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

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

...


...

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

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/83369.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

CarterLi 2021-11-17 09:33 評論0 收藏0