From 2d5d1d1ce1524c4ca4dbdfc9031cdbe3b771867f Mon Sep 17 00:00:00 2001
From: Jeremy Ruston <jeremy@osmosoft.com>
Date: Wed, 5 Jun 2013 15:47:44 +0100
Subject: [PATCH] Improve editting of corrupt images

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.
---
 .../widgets/edit/editors/bitmapeditor.js      | 38 +++++++++++++------
 1 file changed, 27 insertions(+), 11 deletions(-)

diff --git a/core/modules/widgets/edit/editors/bitmapeditor.js b/core/modules/widgets/edit/editors/bitmapeditor.js
index 7818f6523..adc4ce99d 100644
--- a/core/modules/widgets/edit/editors/bitmapeditor.js
+++ b/core/modules/widgets/edit/editors/bitmapeditor.js
@@ -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);