Greasy Fork is available in English.
canvas图表直接下载-将网页上的canvas内容直接转化为png图片并进行下载，可以在图表秀等网站使用。
// ==UserScript==
// @name canvas直接转图片下载
// @namespace https://www.yeqisong.cn
// @version 0.2
// @description canvas图表直接下载-将网页上的canvas内容直接转化为png图片并进行下载，可以在图表秀等网站使用。
// @author bnbnyu
// @require http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js
// @icon https://sso.tubiaoxiu.com/favicon.png
// @include *
// @grant none
// ==/UserScript==
$(document).ready(function () {
var prhtml = '';
prhtml += '<div class="dpannel" style="display: none; background:#fff; width: 350px; height:auto; position: fixed; bottom:15px; right:15px; box-shadow:0 0 6px rgba(0,0,0,0.6); font-size:12px;">';
prhtml += '<div style="height:40px; line-height:40px; font-size:1.2em; font-weight:700; text-align:center; padding-top:20px;">将Canvas转为png图片</div>';
prhtml += '<div style="width: 330px; margin-left:10px; padding:10px 0px; text-align: center;"><img style="max-width:100%; margin:0px auto;" class="canvaspng"/></div>';
prhtml += '<div style="text-align:center; padding: 10px; ">长度: <span class="canvs_width"></span>px;宽度: <span class="canvs_height"></span>px</div>';
prhtml += '<div style="text-align:center; padding-bottom: 30px;"><div id="dpannel_sure" style="display:inline-block; background:#ff6900; cursor:pointer; font-size:14px; font-weight:bold; color:#fff; text-align:center; width:100px; height:25px; line-height:25px;">确定</div><div id="dpannel_close" style="display:inline-block; font-size:14px; cursor:pointer; font-weight:bold; text-align:center; width:100px; height:25px; line-height:25px; margin-left:25px;">关闭</div></div>';
prhtml += '</div>';
$("body").append(prhtml);
var canvas_content = '';
var canvas_width = 300;
var canvas_height = 150;
//移入canvase显示下载按钮
$("body").on("mouseover","canvas",function(){
canvas_content = '';
canvas_width = 300;
canvas_height = 150;
var _this = this;
var this_index = $(_this).index(_this);
//为当前canvas增加class属性org-canvas
$(_this).addClass("org_canvas_"+this_index);
if($(_this).parent().children('.down_canvas_to_img').length == 0){
$(_this).after('<div class="down_canvas_to_img" data-canvas="org_canvas_'+this_index+'" style="display:none; margin:0px; padding:0px; position: relative; cursor:pointer; width:100px; height:20px; line-height:20px; background:#ff6900; color:#fff; font-size:12px; text-align:center; left:10px; top:-25px;">下载为图片</div>');
}
//当前canvas的内容获取
canvas_content = _this.toDataURL("image/png");
canvas_width = _this.width;
canvas_height = _this.height;
$(_this).parent().find('.down_canvas_to_img').css("display","block");
});
//移出canvas且不在按钮上时，隐藏下载按钮
$("body").on("mouseout", "canvas", function(){
if(!$(this).parent().find('.down_canvas_to_img').is(':hover')){
$(this).parent().find('.down_canvas_to_img').css("display","none");
}
});
//移除按钮时隐藏下载按钮
$("body").on("mouseout", ".down_canvas_to_img", function(){
$(this).css("display", "none");
});
//点击现在按钮，弹出下载预览窗口
$("body").on("click", ".down_canvas_to_img", function(){
var _this = this;
$(".dpannel").css("display", "block");
$(".canvaspng").attr("src", canvas_content);
$(".canvs_width").html(canvas_width);
$(".canvs_height").html(canvas_height);
});
//点击下载确定按钮，将canvas下载为图片
$("body").on("click", "#dpannel_sure", function(){
var _this = this;
saveFile(canvas_content, "canvas2png");
});
//点击下载关闭按钮，关闭下载窗口
$("body").on("click", "#dpannel_close", function(){
var _this = this;
$(".dpannel").css("display", "none");
});
//自动保存图片
function saveFile(data, filename) {
const save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = data;
save_link.download = filename;
const event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);
}
});