mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-27 03:57:21 +00:00
Code Issues Releases Wiki Activity

Improve editting of corrupt images

Browse Source 
We now detect errors loading the image and initialise a blank canvas
instead.

This means that it's possible to open HelloThere for editting, and then
change the "type" field to "image/jpeg", and the textarea automatically
switches to a blank bitmap. Next up is making it possible to change the
size of the bitmap.
This commit is contained in:
Jeremy Ruston 2013-06-05 15:47:44 +01:00
parent c0a26d2849
commit 2d5d1d1ce1
1 changed files with 27 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
core/modules/widgets/edit/editors/bitmapeditor.js
View File

@ -12,6 +12,9 @@ A bitmap editor
/*global $tw: false */
"use strict";
var DEFAULT_IMAGE_WIDTH = 300,
DEFAULT_IMAGE_HEIGHT = 182;
var BitmapEditor = function(editWidget,tiddlerTitle,fieldName) {
this.editWidget = editWidget;
this.tiddlerTitle = tiddlerTitle;
@ -38,25 +41,38 @@ BitmapEditor.prototype.postRenderInDom = function() {
var tiddler = this.editWidget.renderer.renderTree.wiki.getTiddler(this.tiddlerTitle),
canvas = this.editWidget.renderer.domNode,
currImage = new Image();
// Get the current bitmap into an image object
currImage.src = "data:" + tiddler.fields.type + ";base64," + tiddler.fields.text;
// Wait until the image is loaded
// Set up event handlers for loading the image
var self = this;
currImage.onload = function() {
// Copy the image to the on-screen canvas
canvas.width = currImage.width;
canvas.height = currImage.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(currImage,0,0);
self.initCanvas(canvas,currImage.width,currImage.height,currImage);
// And also copy the current bitmap to the off-screen canvas
self.currCanvas = self.editWidget.renderer.renderTree.document.createElement("canvas");
self.currCanvas.width = currImage.width;
self.currCanvas.height = currImage.height;
ctx = self.currCanvas.getContext("2d");
ctx.drawImage(currImage,0,0);
self.initCanvas(self.currCanvas,currImage.width,currImage.height,currImage);
};
currImage.onerror = function() {
// Set the on-screen canvas size and clear it
self.initCanvas(canvas,DEFAULT_IMAGE_WIDTH,DEFAULT_IMAGE_HEIGHT);
// Set the off-screen canvas size and clear it
self.currCanvas = self.editWidget.renderer.renderTree.document.createElement("canvas");
self.initCanvas(self.currCanvas,DEFAULT_IMAGE_WIDTH,DEFAULT_IMAGE_HEIGHT);
}
// Get the current bitmap into an image object
currImage.src = "data:" + tiddler.fields.type + ";base64," + tiddler.fields.text;
};
BitmapEditor.prototype.initCanvas = function(canvas,width,height,image) {
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
if(image) {
ctx.drawImage(image,0,0);
} else {
ctx.fillStyle = "#fff";
ctx.fillRect(0,0,canvas.width,canvas.height);
}
}
BitmapEditor.prototype.handleTouchStartEvent = function(event) {
this.brushDown = true;
this.strokeStart(event.touches[0].clientX,event.touches[0].clientY);