我会再试一次。
我无法将报价作为草图画布的一部分下载。我正在使用sketch.js。
这是jsfiddle，你可以像MSpaint一样绘制，但是当我按下下载按钮时，只会复制绘制的内容。我想要草图和下载的文字。
我还应该补充一点，我对所有人都很陌生。
这是代码
<body>
<nav>
<div id="SketchTools">
<!-- Basic tools -->
<a href="#SketchPad" data-color="#000000" title="Black"><img src="img/black_icon.png" alt="Black"/></a>
<a href="#SketchPad" data-color="#ff0000" title="Red"><img src="img/red_icon.png" alt="Red"/></a>
<a href="#SketchPad" data-color="#00ff00" title="Green"><img src="img/green_icon.png" alt="Green"/></a>
<a href="#SketchPad" data-color="#0000ff" title="Blue"><img src="img/blue_icon.png" alt="Blue"/></a>
<a href="#SketchPad" data-color="#ffff00" title="Yellow"><img src="img/yellow_icon.png" alt="Yellow"/></a>
<a href="#SketchPad" data-color="#00ffff" title="Cyan"><img src="img/cyan_icon.png" alt="Cyan"/></a>
<!-- Advanced colors -->
<a href="#SketchPad" data-color="#e74c3c" title="Alizarin"><img src="img/alizarin_icon.png" alt="Alizarin"/></a>
<a href="#SketchPad" data-color="#c0392b" title="Pomegrante"><img src="img/pomegrante_icon.png" alt="Pomegrante"/></a>
<a href="#SketchPad" data-color="#2ecc71" title="Emerald"><img src="img/emerald_icon.png" alt="Emerald"/></a>
<a href="#SketchPad" data-color="#1abc9c" title="Torquoise"><img src="img/torquoise_icon.png" alt="Torquoise"/></a>
<a href="#SketchPad" data-color="#3498db" title="Peter River"><img src="img/peterriver_icon.png" alt="Peter River"/></a>
<a href="#SketchPad" data-color="#9b59b6" title="Amethyst"><img src="img/amethyst_icon.png" alt="Amethyst"/></a>
<a href="#SketchPad" data-color="#f1c40f" title="Sun Flower"><img src="img/sunflower_icon.png" alt="Sun Flower"/></a>
<a href="#SketchPad" data-color="#f39c12" title="Orange"><img src="img/orange_icon.png" alt="Orange"/></a>
<a href="#SketchPad" data-color="#ecf0f1" title="Clouds"><img src="img/clouds_icon.png" alt="Clouds"/></a>
<a href="#SketchPad" data-color="#bdc3c7" title="Silver"><img src="img/silver_icon.png" alt="Silver"/></a>
<a href="#SketchPad" data-color="#7f8c8d" title="Asbestos"><img src="img/asbestos_icon.png" alt="Asbestos"/></a>
<a href="#SketchPad" data-color="#34495e" title="Wet Asphalt"><img src="img/wetasphalt_icon.png" alt="Wet Asphalt"/></a>
</br> <a href="#SketchPad" data-color="#ffffff" title="Eraser"><img src="img/eraser_icon.png" alt="Eraser"/></a>
<!-- Size options -->
<a href="#SketchPad" data-size="1"><img src="img/pencil_icon.png" alt="Pencil"/></a>
<a href="#SketchPad" data-size="3"><img src="img/pen_icon.png" alt="Pen"/></a>
<a href="#SketchPad" data-size="5"><img src="img/stick_icon.png" alt="Stick"/></a>
<a href="#SketchPad" data-size="9"><img src="img/smallbrush_icon.png" alt="Small brush"/></a>
<a href="#SketchPad" data-size="15"><img src="img/mediumbrush_icon.png" alt="Medium brush"/></a>
<a href="#SketchPad" data-size="50"><img src="img/bigbrush_icon.png" alt="Big brush"/></a>
<a href="#SketchPad" data-size="90"><img src="img/bucket_icon.png" alt="Huge bucket"/></a>
<a href="#SketchPad" data-download='png' id="DownloadPng">Download</a>
<br/>
</div>
<div class="links">
<ul>
<li><img src="ficon.png" alt="Facebook"></li>
<li><img src="igramicon.png" alt="Instagram"></li>
<li><img src="picon.png" alt="Pinterest"></li>
<li><img src="mcicon.png" alt="Mixcloud"></li>
<li><img src="twicon.png" alt="Twitter"></li>
</ul>
</div>
<div class="message">
<div id="quote"></div>
<script>
(function() {
var quotes = [
{ text: "Snuggletooth likes pancakes"},
{ text: "Would you like Snuggletooth to tuck you in?"},
{ text: " Snuggletooth loves you"},
{ text: "Snuggletooth is here for you"},
{ text: "Did you know that Snuggletooth </br>can be in 2 places at once?"},
{ text: "Heyyyy!<br> I was just thinking about you </br>Love Snuggletooth" },
{ text: "Wanna Sandwich??</br>xSnuggletooth"},
{ text: "Want some breakfast???</br> ;) Snuggletooth"},
{ text: "Snuggletooth-a-riffic!!!"},
{ text: "Snuggletooth makes great popcorn!"},
{ text: "Come over to Snuggletooth's! He makes a great guacamole!"},
{ text: "Snuggletooth likes his bubblebaths to smell like bubblegum"},
{ text: "Snuggletooth wants to know what are you up to later?"},
{ text: "Snuggletooth-a-licious!!!"},
];
var quote = quotes[Math.floor(Math.random() * quotes.length)];
document.getElementById("quote").innerHTML =
'<p>' + quote.text + '</p>' +
'' + '';
})();
</script>
</div>
</nav>
<canvas id="SketchPad" width="1125" height="600">
</canvas>
</div>
<script type="text/javascript">
$(function() {
$('#SketchPad').sketch();
});
</script>
</body>
这是sketch.js
var __slice = Array.prototype.slice;
(function($) {
var Sketch;
$.fn.sketch = function() {
var args, key, sketch;
key = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
if (this.length > 1) {
$.error('Sketch.js can only be called on one element at a time.');
}
sketch = this.data('sketch');
if (typeof key === 'string' && sketch) {
if (sketch[key]) {
if (typeof sketch[key] === 'function') {
return sketch[key].apply(sketch, args);
} else if (args.length === 0) {
return sketch[key];
} else if (args.length === 1) {
return sketch[key] = args[0];
}
} else {
return $.error('Sketch.js did not recognize the given command.');
}
} else if (sketch) {
return sketch;
} else {
this.data('sketch', new Sketch(this.get(0), key));
return this;
}
};
Sketch = (function() {
function Sketch(el, opts) {
this.el = el;
this.canvas = $(el);
this.context = el.getContext('2d');
this.options = $.extend({
toolLinks: true,
defaultTool: 'marker',
defaultColor: 'black',
defaultSize: 5
}, opts);
this.painting = false;
this.color = this.options.defaultColor;
this.size = this.options.defaultSize;
this.tool = this.options.defaultTool;
this.actions = [];
this.action = [];
this.canvas.bind('click mousedown mouseup mousemove mouseleave mouseout touchstart touchmove touchend touchcancel', this.onEvent);
if (this.options.toolLinks) {
$('body').delegate("a[href=\"#" + (this.canvas.attr('id')) + "\"]", 'click', function(e) {
var $canvas, $this, key, sketch, _i, _len, _ref;
$this = $(this);
$canvas = $($this.attr('href'));
sketch = $canvas.data('sketch');
_ref = ['color', 'size', 'tool'];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
key = _ref[_i];
if ($this.attr("data-" + key)) {
sketch.set(key, $(this).attr("data-" + key));
}
}
if ($(this).attr('data-download')) {
sketch.download($(this).attr('data-download'));
}
return false;
});
}
}
Sketch.prototype.download = function(format) {
var mime;
format || (format = "png");
if (format === "jpg") {
format = "jpeg";
}
mime = "image/" + format;
return window.open(this.el.toDataURL(mime));
};
Sketch.prototype.set = function(key, value) {
this[key] = value;
return this.canvas.trigger("sketch.change" + key, value);
};
Sketch.prototype.startPainting = function() {
this.painting = true;
return this.action = {
tool: this.tool,
color: this.color,
size: parseFloat(this.size),
events: []
};
};
Sketch.prototype.stopPainting = function() {
if (this.action) {
this.actions.push(this.action);
}
this.painting = false;
this.action = null;
return this.redraw();
};
Sketch.prototype.onEvent = function(e) {
if (e.originalEvent && e.originalEvent.targetTouches) {
e.pageX = e.originalEvent.targetTouches[0].pageX;
e.pageY = e.originalEvent.targetTouches[0].pageY;
}
$.sketch.tools[$(this).data('sketch').tool].onEvent.call($(this).data('sketch'), e);
e.preventDefault();
return false;
};
Sketch.prototype.redraw = function() {
var sketch;
this.el.width = this.canvas.width();
this.context = this.el.getContext('2d');
sketch = this;
$.each(this.actions, function() {
if (this.tool) {
return $.sketch.tools[this.tool].draw.call(sketch, this);
}
});
if (this.painting && this.action) {
return $.sketch.tools[this.action.tool].draw.call(sketch, this.action);
}
};
return Sketch;
})();
$.sketch = {
tools: {}
};
$.sketch.tools.marker = {
onEvent: function(e) {
switch (e.type) {
case 'mousedown':
case 'touchstart':
this.startPainting();
break;
case 'mouseup':
case 'mouseout':
case 'mouseleave':
case 'touchend':
case 'touchcancel':
this.stopPainting();
}
if (this.painting) {
this.action.events.push({
x: e.pageX - this.canvas.offset().left,
y: e.pageY - this.canvas.offset().top,
event: e.type
});
return this.redraw();
}
},
draw: function(action) {
var event, previous, _i, _len, _ref;
this.context.lineJoin = "round";
this.context.lineCap = "round";
this.context.beginPath();
this.context.moveTo(action.events[0].x, action.events[0].y);
_ref = action.events;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
event = _ref[_i];
this.context.lineTo(event.x, event.y);
previous = event;
}
this.context.strokeStyle = action.color;
this.context.lineWidth = action.size;
return this.context.stroke();
}
};
return $.sketch.tools.eraser = {
onEvent: function(e) {
return $.sketch.tools.marker.onEvent.call(this, e);
},
draw: function(action) {
var oldcomposite;
oldcomposite = this.context.globalCompositeOperation;
this.context.globalCompositeOperation = "copy";
action.color = "rgba(0,0,0,0)";
$.sketch.tools.marker.draw.call(this, action);
return this.context.globalCompositeOperation = oldcomposite;
}
};
})(jQuery);
以防这里是css
@import url(http://fonts.googleapis.com/css?family=Codystar);
@import url(http://fonts.googleapis.com/css?family=Lobster);
img {
width: 25px;
height: 25px;
}
li{
}
ul li {
list-style-type: none;
display: inline;
}
.message {
margin-left: 20%;
margin-top: 20%;
z-index: 1;
position: absolute;
font-family: Lobster, Codystar, arial;
font-size: 3.5em;
color:white;
text-align: center;
text-shadow: 2px 2px #ff0000;
}
.links {
float: right;
padding-right: 1em;
}
#SketchPad {
border-color: black;
border-width: 3px;
border-style: solid;
position: fixed;
}
#DownloadPng {
padding: 4px 2px;
font-size: 1em;
line-height: 100%;
text-shadow: 0 1px rgba(0, 0, 0, 0.5);
color: #fff;
display:inline-block;
/*vertical-align: middle;
text-align: center;*/
cursor: pointer;
font-weight: bold;
transition: background 0.1s ease-in-out;
-webkit-transition: background 0.1s ease-in-out;
-moz-transition: background 0.1s ease-in-out;
-ms-transition: background 0.1s ease-in-out;
-o-transition: background 0.1s ease-in-out;
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
color: #fff;
font-family: Arial, sans-serif;
background-color: #2ecc71;
box-shadow: 0px 7px 0px 0px #27ae60;
text-decoration: none;
margin-top: 10px;
margin-bottom: 15px;
}
#DownloadPng:hover {
background-color: #27ae60;
border-radius: 7px;
}
#DownloadPng:active {
box-shadow: 0px 1px 0px 0px #27ae60;
border-radius: 7px;
}
#SketchTools {
width: 65%;
height: 5%;
position: fixed;
float: left;
z-index: 1;
padding: .2em;
}