Warning: fopen(/www/sites/update.greasyfork.icu/index/store/temp/83a0877ac00fa3e0c93c544688756671.js): failed to open stream: No space left on device in /www/sites/update.greasyfork.icu/index/scriptControl.php on line 65
// ==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
// @downloadURL https://update.greasyfork.icu/scripts/373550/canvas%E7%9B%B4%E6%8E%A5%E8%BD%AC%E5%9B%BE%E7%89%87%E4%B8%8B%E8%BD%BD.user.js
// @updateURL https://update.greasyfork.icu/scripts/373550/canvas%E7%9B%B4%E6%8E%A5%E8%BD%AC%E5%9B%BE%E7%89%87%E4%B8%8B%E8%BD%BD.meta.js
// ==/UserScript==
$(document).ready(function () {
var prhtml = '';
prhtml += '';
prhtml += '
将Canvas转为png图片
';
prhtml += '
';
prhtml += '
长度: px;宽度: px
';
prhtml += '
';
prhtml += '
';
$("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('下载为图片
');
}
//当前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);
}
});