jupyter notebook 实现修改图片大小
·
我尝试了以下几种方法,在jupyter notebook
- 使用外部css文件,在jupyter 文件夹中增加一个custom文件夹,并且在该文件夹中增加custom.css就会替代jupyter notebook。但是这个不好的地方,由于github中无法显示自定义的css文件,导致失败。(参考博客)
- 使用魔法方法%%html,但是这样子也有问题,我想要导出成gitbook的时候会花很多力气进行排版
- 使用标签,html是支持标签的,所以我就使用了标签,但是我不想手打标签,所以我就写了一个js函数,来实现。这里和之前相对应,在上篇文章中的main.min.js中的MarkdownCell.prototype.insert_inline_image_from_blob这个函数中修改代码
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 width = window.getSelection().toString();
document.execCommand('delete');
var image_url = 'pictures/'+picture_name;
if(width==""){
var img_md = '![' + key + '](' + image_url + ')';
}else{
var img_md = '<img src="'+image_url+'" width="'+width+'" />'
}
that.code_mirror.replaceRange(img_md, pos);
},
});
}
reader.readAsDataURL(blob);
};
最后实现效果
首先写一个数字
选中数字
此时进行ctrl+v(和上篇文章一样)
更多推荐
已为社区贡献1条内容
所有评论(0)