5
पर HTML5 कैनवास तत्व सहेजें मैं एंड्रॉइड पर एक वेबपैप कर रहा हूं, और मेरे पास एक HTML5 कैनवास है जिस पर कोई उपयोगकर्ता टच ईवेंट का उपयोग करके वह आकर्षित कर सकता है। और मैं इसे एक एसडीकार्ड पर सहेजना चाहता हूं, इसलिए स्थानीय में। और उस सामान को करने के लिए किसी सर्वर साइड स्क्रिप्ट (php आदि) का उपयोग नहीं कर सकता।फ़ाइल (स्थानीय)
मैं एक magictouch.js उदाहरण उपयोग कर रहा हूँ:
<canvas id="example" height=450 width=300></canvas>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="magictouch.js"></script>
<script>
var CanvasDrawr = function(options) {
var canvas = document.getElementById(options.id),
ctxt = canvas.getContext("2d");
var img = canvas.toDataURL("image/png");
ctxt.lineWidth = options.size || Math.ceil(Math.random() * 35);
ctxt.lineCap = options.lineCap || "round";
ctxt.pX = undefined;
ctxt.pY = undefined;
var lines = [,,];
var offset = $(canvas).offset();
var self = {
//bind click events
init: function() {
canvas.addEventListener('touchstart', self.preDraw, false);
canvas.addEventListener('touchmove', self.draw, false);
},
preDraw: function(event) {
$.each(event.touches, function(i, touch) {
var id = touch.identifier;
lines[id] = { x : this.pageX - offset.left,
y : this.pageY - offset.top,
color : options.color || ["black"]
};
});
event.preventDefault();
},
draw: function(event) {
var e = event, hmm = {};
$.each(event.touches, function(i, touch) {
var id = touch.identifier;
var moveX = this.pageX - offset.left - lines[id].x,
moveY = this.pageY - offset.top - lines[id].y;
var ret = self.move(id, moveX, moveY);
lines[id].x = ret.x;
lines[id].y = ret.y;
});
event.preventDefault();
},
move: function(i, changeX, changeY) {
ctxt.strokeStyle = lines[i].color;
ctxt.beginPath();
ctxt.moveTo(lines[i].x, lines[i].y);
ctxt.lineTo(lines[i].x + changeX, lines[i].y + changeY);
ctxt.stroke();
ctxt.closePath();
return { x: lines[i].x + changeX, y: lines[i].y + changeY };
}
};
return self.init();
};
$(function(){
var super_awesome_multitouch_drawing_canvas_thingy = new CanvasDrawr({id:"example", size: 2 });
console.log('loaded');
});
</script>
</body>
लेकिन सभी उदाहरण जो मैं इंटरनेट पर मिले डिकोड और एक छवि के रूप canva बचाने के लिए एक सर्वर पर एक php स्क्रिप्ट के साथ इस्तेमाल किया गया। और वास्तव में बस अपने एंड्रॉइड डिवाइस पर, मेरे एसडीकार्ड में, एचटीएमएल 5/जावास्क्रिप्ट का उपयोग करके करना चाहते हैं ...
धन्यवाद।
क्या आपने कभी यह पता लगाया है? – user899641