jupyter notebook ctrl+v图片上传

前段时间使用jupyter notebook感觉不错，但是在使用markdown编辑方式的时候还是感觉不是很好。其中很大一个原因就是不能ctrl+v自动把代码贴上去。粘上去之后是这样子的。

这就很尴尬了。所以百度了一些资料后，发现ctrl+v上传粘贴板中图片的原理，所以就打开f12 搜索一下

然后一个个排查，最后终于找到了jupter notebook实现ctrl+v粘贴图片的地方这个地方,文件名是main.min.js文件。

然后搜索相对应的insert_inline_image_blob函数就可以看到该文件下有一个函数。修改这个函数中的

 var img_md = '![' + key + '](attachment:' + key + ')';

就可以成功

我的修改是直接放在同一个文件夹下的pictures文件夹中。替代当然如果你有云图的话，可以直接在这里写ajax来上传图片。就可以实现ctrl+v上传图片
下面是代码实现，我重新写了一遍，但是兼容性肯定不是很好

		 MarkdownCell.prototype.insert_inline_image_from_blob = function(blob) {
        /**
         * Insert markup for an inline image at the current cursor position.
         * This works as follow :
         * - We insert the base64-encoded blob data into the cell attachments
         *   dictionary, keyed by the filename.
         * - We insert an img tag with a 'attachment:key' src that refers to
         *   the attachments entry.
         *
         * Parameters:
         *  file: Blob
         *      The JS Blob object (e.g. from the DataTransferItem)
         */
        


		 function GetPicturepath()
		{
		　　var url = document.location.toString();
		　　var arrUrl = url.split("//");
		　　var start = arrUrl[1].indexOf("/");
		　　var relUrl = arrUrl[1].substring(start);//stop省略，截取从start开始到结尾的所有字符
			relUrl = relUrl.replace('\/notebooks\/','')
		　　if(relUrl.indexOf("?") != -1){
		　　　　relUrl = relUrl.split("?")[0];
		　　}
			var re2Url=relUrl.split("/"); 
			re2Url.pop();
			relUrl = re2Url.join("/")+'/pictures/';
		　　return relUrl;
		} 



        var that = this;
        var pos = this.code_mirror.getCursor();
        var reader = new FileReader();
        // We can get either a named file (drag'n'drop) or a blob (copy/paste)
        // We generate names for blobs
        var key;
        if (blob.name !== undefined) {
            key = encodeURIandParens(blob.name);
        } else {
            key = '_auto_' + Object.keys(that.attachments).length;
        }

        reader.onloadend = function() {
            var d = utils.parse_b64_data_uri(reader.result);
            if (blob.type != d[0]) {
                // TODO(julienr): Not sure what we should do in this case
                console.log('File type (' + blob.type + ') != data-uri ' +
                            'type (' + d[0] + ')');
            }


            if(blob.name=='image.png'){
            	var picture_name=Math.random().toString(36).substr(2)+'.png';
            }else{
            	var picture_name=blob.name
            }
           
            var api_url =  'http://'+document.domain+'/api/contents/'+GetPicturepath()+picture_name;
            $.ajax({
					type: 'PUT',
					url: api_url,
					contentType:"application/json",
					// date:JSON.parse('{"format":"base64","name":"picture_name"}'),
					data: JSON.stringify({'content':d[1],'format':"base64",'name':picture_name,'path':GetPicturepath()+picture_name,'type':'file'}),
				 	beforeSend:function(jqXHR,options){
				 		var _xsrf = (/_xsrf=[^;]+;?/i).exec(document.cookie)[0];
						_xsrf = _xsrf.replace(/(_xsrf=)/,'');
    					jqXHR.setRequestHeader("X-XSRFToken",_xsrf) ;  // 增加一个自定义请求头
  					},
  					success: function (data) {
  						var image_url = 'http://'+document.domain+'/files/'+data['path']
           				var img_md = '![' + key + '](' + image_url + ')';
           				that.code_mirror.replaceRange(img_md, pos);
           			},	
			});  

        }

        reader.readAsDataURL(blob);
    };

重启jupyter notebook。
查看效果

渲染markdown